如何在 CSS3 中创建凹边梯形？

Question

我正在尝试创建一个有一个凹边的梯形。

我更喜欢 CSS3 跨浏览器兼容且响应迅速的解决方案。

我发现这个提供的解决方案与我预期的解决方案非常相似。但是，我更喜欢凹面不要像提供的解决方案中那样圆，到目前为止我无法实现。

非常重要的一点是形状支持 alpha 通道 (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>

调整指示的属性，使梯形看起来如您所愿。

如何在 CSS3 中创建凹边梯形？

How to create trapezoide with concave side in CSS3?

css

css-shapes

shapes

concave