<div class="container">
  <div class="item item--1"></div>
  <div class="item item--2"></div>
  <div class="item item--3"></div>
</div>
.container {
  /* max-width: 576px; */
  margin: 0 auto;
}

.item {
  height: 200px;
  margin-bottom: 32px;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 5px rgba(255, 0, 255, 0.5));
}

.item--1 {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='134'%3E%3Cpath d='M0,0V134H8.36a10,10,0,0,0,9.84-8.24,134,134,0,0,1,263.6,0,10,10,0,0,0,9.84,8.24H300V0Z' fill='%23673ab7'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% calc(100% + 16px), transparent 142px, #673ab7 143px);
  background-size: 300px, 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.item--2 {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='134'%3E%3Cpath d='M291.64,0a10,10,0,0,0-9.84,8.24A134,134,0,0,1,150,118,134,134,0,0,1,18.2,8.24,10,10,0,0,0,8.36,0H0V134H300V0Z' fill='%23673ab7'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% -16px, transparent 142px, #673ab7 143px);
  background-size: 300px, 100%;
  background-repeat: no-repeat;
  background-position: center top;
}

.item--3 {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='134' fill='%23673ab7'%3E%3Cpath d='M127.43,104.19c.11.65.32,1,.64,1.13a3.5,3.5,0,0,0,1.13.16c1.07-.43,1.55-1,1.44-1.61s-.69-1-1.76-1C127.8,103.12,127.32,103.55,127.43,104.19Z'/%3E%3Cpath d='M114.74,103.55c-.21.22-.16.48.16.81a4.43,4.43,0,0,0,1.13.8,1.38,1.38,0,0,0,1.28,0,1.49,1.49,0,0,0,.8-1.13c.11-.53-.37-1-1.44-1.28S115,102.7,114.74,103.55Z'/%3E%3Cpath d='M0,0V134H130.36a4.07,4.07,0,0,0,1.08-2.82l-.32-19.6-3.53.32a34.23,34.23,0,0,1-8,.33,23.89,23.89,0,0,1-9.32-2.9,13,13,0,0,1-6.1-7.38l-1.28-2.57a20.8,20.8,0,0,0-3.22-5.14,15.91,15.91,0,0,0-4.49-4.18l-1.61-1.28c-1.07-.86-1.55-1.66-1.44-2.41s1.33-1.13,3.69-1.13l2.25.32a35,35,0,0,1,4.82,2.25A16.84,16.84,0,0,1,108,93.59q4.48,8,12.84,8.68a19.07,19.07,0,0,0,10.6-1.93q1-7.07,5.14-10.92Q125,88.13,119.24,86.21q-9-3.22-13.49-10-5.15-8-5.14-22.49a25.37,25.37,0,0,1,1.76-10.12A41.32,41.32,0,0,1,108,34.81a18.24,18.24,0,0,1-1.29-7.39A29.71,29.71,0,0,1,109,13.29c1.93-.64,4.82-.22,8.67,1.28a71.71,71.71,0,0,1,9.32,4.5L131.12,22a69.45,69.45,0,0,1,20.08-2.89A72.72,72.72,0,0,1,171.6,22l4.17-2.89a87.18,87.18,0,0,1,9-4.5q5.78-2.25,9-1.28A36.34,36.34,0,0,1,196,27.42a25.5,25.5,0,0,1-1.61,7.71,37.53,37.53,0,0,1,6.11,8,23.43,23.43,0,0,1,2.25,10.6q0,14.46-5.46,22.81-4.83,6.42-13.82,9.64-5.78,1.92-17.66,3.21,5.46,4.5,5.46,14.77v27a4.07,4.07,0,0,0,1.08,2.82H300V0Z'/%3E%3Cpath d='M99,88.13c-.21.43.06.86.8,1.29s1.24.37,1.45-.16,0-1-.64-1.29A1.29,1.29,0,0,0,99,88.13Z'/%3E%3Cpath d='M110.57,99.22a1,1,0,0,0-1,.16,1.31,1.31,0,0,0-.32,1,1.81,1.81,0,0,0,.64,1.28q1.29,1.29,2.25.33a1,1,0,0,0,.16-1,2.3,2.3,0,0,0-.64-1.12A2.35,2.35,0,0,0,110.57,99.22Z'/%3E%3Cpath d='M102.54,90.7c-.43.43-.33,1,.32,1.61s1.17.75,1.6.32.32-1-.32-1.61S103,90.27,102.54,90.7Z'/%3E%3Cpath d='M106.87,94.72a1.42,1.42,0,0,0-1.12.16c-.43.21-.43.86,0,1.93a8.76,8.76,0,0,1,1.12.64c.32.21.59.21.8,0,.65-.43.65-1.07,0-1.93A1.45,1.45,0,0,0,106.87,94.72Z'/%3E%3C/svg%3E"),
    radial-gradient(circle at 50% calc(100% + 16px), transparent 142px, #673ab7 143px);
  background-size: 300px, 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.