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

【问题标题】：How to create trapezoide with concave side in CSS3?如何在 CSS3 中创建凹边梯形？
【发布时间】：2016-12-02 11:21:20
【问题描述】：

我正在尝试创建一个具有一侧凹面的梯形。

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

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

非常重要的是该形状支持 Alpha 通道 (rgba)，因为我想在该形状后面放置一个应该通过该形状发光的图像。

解决方案应如下所示：

【问题讨论】：

形状的另一边会出现什么？它是否必须显示背后的内容（如透明）？悬停效果应该如何？它应该限制在形状边界还是没有任何悬停效果？您是否还尝试修改链接的帖子以满足您的需要？
@Harry 形状将位于图像前面。它应该具有透明度。不需要悬停。是的，我试图修改链接帖子中的小提琴，但我无法让凹面像我预期的那样平坦。
@Harry 和解决方案不支持透明度
你确定吗？你运行了那个sn-p吗？它通过形状的剪切部分显示背景图像。
@Harry 是的，你是对的，确实支持透明度，但是我无法实现平凹。

标签： css css-shapes shapes concave

【解决方案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>

调整指示的属性以使梯形看起来符合您的要求。

【讨论】：

如果我不需要透明度，这将是一个合适的解决方案，我之前没有提到，对不起