<div class="container">
  <div class="container-inner">
    <div class="sticky-container">
      <div class="sticky-outer">
        <div class="sticky">
          <svg width="0" height="0">
            <defs>
              <clipPath id="stickyClip" clipPathUnits="objectBoundingBox">
                <path
                      d="M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0"
                      stroke-linejoin="round"
                      stroke-linecap="square"
                      />  
              </clipPath>
            </defs>
          </svg>
          <div class="sticky-content">
            Hello! I'm a<br>
            sticky note!
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Kalam&display=swap');

/* Some positioning and ratios */
.sticky-container {
  max-width: 270px;
  position: relative;
}

.sticky-outer {
  display: flex;
  padding-top: 92.5925926%;
  position: relative;

  width: 100%;
}

.sticky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Shadow behind the sticky note */
.sticky:before {
  box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.25);
  content: '';
  width: 90%;
  left: 5px;
  height: 75%;
  position: absolute;
  top: 30%;
}

/* The sticky note itself */
.sticky-content {
  background: linear-gradient(
    180deg,
    rgba(187, 235, 255, 1) 0%,
    rgba(187, 235, 255, 1) 12%,
    rgba(170, 220, 241, 1) 75%,
    rgba(195, 229, 244, 1) 100%
  );
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Kalam', cursive;
  font-size: 1.25rem;

  clip-path: url(#stickyClip);
}


/* Position the sticky nicely, so it looks better */
html,
body {
  height: 100%;
  margin: 0;
  font-size: 16px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.container-inner {
  width: 50%;
  margin: 25px;
}

/* Add responsiveness */
@media screen and (min-width: 640px) {
  .sticky-content {
    font-size: 1.5rem;
  }
  .container-inner {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .sticky-content {
    font-size: 1.5rem;
  }
  .container-inner {
    width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  .sticky-content {
    font-size: 1.875rem;
  }
  .container-inner {
    width: 25%;
  }
}