带有 css 和 box-shadow 的梯形答案

【问题标题】：Trapezium with css AND with box-shadow带有 css 和 box-shadow 的梯形
【发布时间】：2012-11-14 20:43:46
【问题描述】：

我正在考虑制作一个顶部比底部宽 10 像素的盒子阴影的梯形。在过去，我制作了一个梯形，如下面的 jsfiddle 中所述，但您会注意到，如果我将 box-shadow 放在元素上，它会将 outerWidth 框在一个矩形中，而不是在倾斜的边框上放置阴影：

#trapezium {
   margin:20px auto;
   height: 0;
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
   box-shadow:0 0 10px #333;
}

http://jsfiddle.net/YhePf/8/

我最初的想法是使用以下内容：

-webkit-transform:perspective(100) rotateX(1deg);

类似的东西。虽然这肯定会开始解决问题，但我不确定数字 100 在“透视”中指的是什么，以及我如何计算一个公式来确保顶部宽度恰好比底部宽 10px，不管如何此元素的高或宽。

有什么建议吗？还是第三种选择？

【问题讨论】：

我做了类似here 的事情，所以我确信这是可能的。遗憾的是，我现在没有时间做这件事，而且可能根本没有机会，更不用说很快了。我希望这个答案可以帮助你！（但是，如果有机会，我会努力解决这个问题。）

标签： css webkit transform css-shapes

【解决方案1】：

您构建的不是梯形（又称梯形）形状的元素；它是一个矩形元素，边框样式创建了梯形的外观。这就是为什么 box-shadow 是矩形的。

使用专有的 -webkit-transform 属性不会改变实际元素的形状。

要创建真正的非矩形元素，您需要使用 SVG。请参阅Multi-Shaped CSS Layers \ Non-rectangular CSS Layer 或non-rectangular hoverable area。

【讨论】：