Как создать трапецию с вогнутой стороной в CSS3?

Question

Я пытаюсь создать трапецию с одной вогнутой стороной.

Я предпочитаю решение CSS3, которое совместимо с браузерами и отзывчиво.

Я нашел этот пост, который предоставляет решение, очень похожее на мое ожидаемое решение. Однако я предпочитаю, чтобы вогнутая сторона была не такой круглой, как в представленном решении, чего я пока не смог достичь.

Очень важно, что форма поддерживает альфа-канал (rgba), потому что я хочу поместить изображение позади формы, которая должна просвечивать через форму.

Решение должно выглядеть следующим образом:

Answer 1

Вы можете использовать div создать прямоугольник с нужным размером. Установить div в position: relative а также overflow: hidden,

Затем используйте псевдоэлемент с position: absolute и непрозрачный box-shadow,

#container{
  width: 400px;
  height: 200px;
  background-image: url("http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg");
  padding: 50px;
}
#trapezoide{
  position:relative;
  overflow: hidden;
  
  /* Play with this properties to achieve the trapezoide just like you want. */
  height: 100px;
  width: 300px;
}

#trapezoide:before{
  content: "";
  border-radius: 50%;
  transform: translate(50%, -50%);
  position: absolute;
  box-shadow: 0 0 0 500px black;
  
  /* Play with this properties to achieve the trapezoide just like you want. */
  width: 800px;
  height: 800px;
  top: -288px;
  right: -100px;
}

<div id="container">
  <div id="trapezoide"></div>
</div>

Настройте указанные свойства, чтобы трапеция выглядела так, как вы хотите.