如何在CSS3中创建带有凹面的梯形？

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

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

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

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

解决方案应如下所示：

---

您可以使用

div

创建具有所需大小的矩形。将

div

设置为

position:relative

和

overflow:hidden

然后使用位置为绝对的伪元素和不透明的框阴影

#容器{
宽度：400px；
高度：200px；
背景图像：url（“http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg");
填充：50px；
}
#梯形{
位置：相对位置；
溢出：隐藏；
/*使用此属性可以实现所需的梯形*/
高度：100px；
宽度：300px；
}
#梯形：前{
内容：“；
边界半径：50%；
转换：翻译（50%，-50%）；
位置：绝对位置；
盒影：0 500像素黑色；
/*使用此属性可以实现所需的梯形*/
宽度：800px；
高度：800px；
顶部：-288px；
右：-100px；
}

形状的另一侧将显示什么？它是否必须显示背后的内容（例如透明）？悬停效果应该是怎样的？它应该限制在形状边界上，还是没有任何悬停效果？你还试图修改链接帖子以满足你的需要吗？@Harry该形状将出现在一张图片前面。它应该具有透明度。不需要悬停。是的，我试图修改链接文章中的小提琴，但我无法使凹面像我预期的那样平坦。@Harry，解决方案不支持透明，你确定吗？你运行了那个片段吗？它通过形状的切割部分显示背景图像。@Harry是的，你是对的，透明度确实受支持，但我无法实现平凹。如果我不需要透明度，这将是一个合适的解决方案，我以前没有提到，抱歉