ساخت اسلایدر جذاب با المنتور

کپی دانلود کپی دانلود

/* HTML: <img class="inner-curve" src="" alt=""> */
.inner-curve {
  --r: 20px;  /* control the rounded part */
  --s: 40px;  /* control the size of the cut */
  --a: 20deg; /* control the depth of the curvature */
  --p: 50%;   /* control the position */

  height: 200px;
  aspect-ratio: 3/2;
  background: #ED303C;
  border-radius: var(--r);
  --_m:calc(100% - var(--r)),#000 calc(100% - 1px),#0000;
  --_d:(var(--s) + var(--r))*cos(var(--a));
  mask:
    radial-gradient(var(--r) at calc(var(--p) + var(--_d)) var(--_m)),
    radial-gradient(var(--r) at calc(var(--p) - var(--_d)) var(--_m)),
    radial-gradient(var(--s) at var(--p) calc(100% + sin(var(--a))*var(--s)),
      #۰۰۰۰ ۱۰۰%,#۰۰۰ calc(100% + 1px)) 0 calc(var(--r)*(sin(var(--a)) - 1)) no-repeat,
    linear-gradient(90deg,#000 calc(var(--p) - var(--_d)),#0000 0 calc(var(--p) + var(--_d)),#000 0);
}