Clip-path и маски в CSS: сложные формы и эффекты

.circle {
  clip-path: circle(50%);
}

.ellipse {
  clip-path: ellipse(40% 50% at 50% 50%);
}

.inset {
  clip-path: inset(20px 10px 30px 10px round 10px);
}

.polygon {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

clip-path: circle(50%);                      /* круг от центра */
clip-path: circle(100px at 25% 50%);         /* радиус 100px, центр смещён */

clip-path: ellipse(60% 40% at 50% 50%);

clip-path: inset(10px);                      /* 10px со всех сторон */
clip-path: inset(10px 20px);                 /* вертикаль горизонталь */
clip-path: inset(0 round 16px);              /* с закруглением углов */

/* Треугольник */
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

/* Стрелка вправо */
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

/* Шестиугольник */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

/* Звезда */
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

.shape {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.5s ease;
}

.shape:hover {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%); /* «схлопнется» */
}

.morph {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.morph:hover {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

<svg width="0" height="0">
  <defs>
    <clipPath id="wave" clipPathUnits="objectBoundingBox">
      <path d="M0,0.8 C0.3,1 0.7,0.6 1,0.8 L1,1 L0,1 Z"/>
    </clipPath>
  </defs>
</svg>

<div class="wave-shape"></div>

.wave-shape {
  clip-path: url(#wave);
}

.masked {
  -webkit-mask-image: url('/mask.svg');
  mask-image: url('/mask.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.fade-bottom {
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.fade-edges {
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.dissolve {
  -webkit-mask-image: url('/noise.png');
  mask-image: url('/noise.png');
  -webkit-mask-size: 200px;
  mask-size: 200px;
}

.mask {
  mask-image: url('mask.svg');
  mask-mode: alpha;         /* alpha | luminance */
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  mask-composite: add;      /* пересечение нескольких масок */
}

.mask {
  mask: url('mask.svg') center / cover no-repeat;
}

.diagonal-section {
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  padding: 4rem 0;
}

/* Обратная */
.diagonal-section-inverse {
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
}

.card-featured {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.truncate-mask {
  -webkit-mask-image: linear-gradient(to right, black 70%, transparent);
  mask-image: linear-gradient(to right, black 70%, transparent);
  overflow: hidden;
  white-space: nowrap;
}

.reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s ease;
}

.reveal.visible {
  clip-path: inset(0 0 0 0);
}