<div class="card">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, facere tempore vel eaque cupiditate placeat fugit excepturi? Totam quidem, eius ratione vel, sequi itaque assumenda velit iusto excepturi culpa ipsam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo voluptatem in corrupti! Neque dignissimos, ut nulla suscipit libero ex, corrupti eum eius beatae consequatur fugit omnis quasi quam tempore nemo maxime quas voluptatibus doloribus? Magni incidunt ipsam quod iure ipsa amet expedita veritatis.
</div>

*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  --border-width: 2px;
  --border-radius: 25px;
  position: relative;
  margin: 50px auto;
  width: 50%;
  padding: 15px 50px;
  z-index: 0;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
  color: #fff;
}

.card:hover::after {
  opacity: 1;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--border-radius);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M50,0H0V1.69A8,8,0,0,0,2.34,7.34L17.17,22.17a4,4,0,0,1,0,5.66L2.34,42.66A8,8,0,0,0,0,48.31V50H50Z' fill='%234caf50'/%3E%3C/svg%3E") no-repeat 0 50% / 100px 100px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M0,0H50V1.69a8,8,0,0,1-2.34,5.65L32.83,22.17a4,4,0,0,0,0,5.66L47.66,42.66A8,8,0,0,1,50,48.31V50H0Z' fill='%234caf50'/%3E%3C/svg%3E") no-repeat 100% 50% / 100px 100px,
    radial-gradient(circle at left center, transparent 50px, #4caf50 50px) no-repeat 0 0 / 50% 100%,
    radial-gradient(circle at right center, transparent 50px, #4caf50 50px) no-repeat 100% 0 / 50% 100%;
  z-index: -1;
}

.card::after {
  content: '';
  opacity: 0;
  transition: opacity 450ms;
  position: absolute;
  top: calc(var(--border-width) * -1);
  left: calc(var(--border-width) * -1);
  right: calc(var(--border-width) * -1);
  bottom: calc(var(--border-width) * -1);
  border-radius: calc(var(--border-radius) + var(--border-width));
  z-index: -2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M50,0H0V1.69A8,8,0,0,0,2.34,7.34L17.17,22.17a4,4,0,0,1,0,5.66L2.34,42.66A8,8,0,0,0,0,48.31V50H50Z' fill='%23e91e63'/%3E%3C/svg%3E") no-repeat 0 50% / 100px 100px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M0,0H50V1.69a8,8,0,0,1-2.34,5.65L32.83,22.17a4,4,0,0,0,0,5.66L47.66,42.66A8,8,0,0,1,50,48.31V50H0Z' fill='%23e91e63'/%3E%3C/svg%3E") no-repeat 100% 50% / 100px 100px,
    radial-gradient(circle at left center, transparent 50px, #e91e63 50px) no-repeat 0 0 / 50% 100%,
    radial-gradient(circle at right center, transparent 50px, #e91e63 50px) no-repeat 100% 0 / 50% 100%;
}