2

我正在考虑制作一个顶部比底部宽 10px 的盒子阴影的梯形。在过去，我制作了一个梯形，如下面的 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，不管如何高或宽这个元素。

有小费吗？还是第三种选择？

4

1 回答 1

1

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

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

要创建真正的非矩形元素，您需要使用 SVG。请参阅多形 CSS 图层\非矩形 CSS 图层或非矩形悬停区域。

于 2012-11-14T21:19:57.557 回答