Как сделать выпуклую форму для контейнера с видео?

Question

[artuh_a]

Есть может у кого-нибудь идеи как можно сделать такой блок с чуть скругленными выпуклыми горизонтальными сторонами? Сам блок с картинкой - это контейнер для <video>.

Answer 1

[Mizutsune]

Можно сделать например через clip-path + SVG.

Если кратко объяснить процесс, то это делается примерно так:

Рисуете в графическом редакторе фигуру, которая будет использоваться в качестве контейнера для видео. Далее копируем код SVG и воспользовавшись данным инструментом, получаем координаты для реализации clip-path.

Финальная реализация будет выглядеть примерно так:

<svg class="svg">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
    <path d="M0.5,0 L1,1 H0"></path>
  </clipPath>
</svg>

<div class="clipped">
  <video src="./assets/video.mp4"></video>
</div>

.svg {
     position: absolute;
     width: 0;
     height: 0;
}

.clipped {
     width: 100%;
     max-width: 500px;
     height: 350px;
     -webkit-clip-path: url(#my-clip-path);
     clip-path: url(#my-clip-path);
}

video {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

Comments

[artuh_a]

Спасибо, сейчас попробую

[artuh_a]

Получилось, как хотел, спасибо!

[Mizutsune]

artuh_a, отлично.