css - 带 css 和带框阴影的梯形

Question

我正在考虑制作一个顶部比底部宽 10 像素的框阴影的梯形。在过去，我已经按照以下 jsfiddle 中的概述制作了一个梯形，但您会注意到，如果我在元素上放置一个框阴影，它会将 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，无论如何这个元素是高还是宽。

有什么建议吗？或者第三种选择来实现这一目标？

Answer 1

您构建的不是梯形(又名梯形)形状的元素；它是一个矩形元素，其中边框样式创建了梯形的外观。这就是 box-shadow 是矩形的原因。

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

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