Question

我正在制作一个带有阴影的梯形，顶部比底部宽10px。在过去，我已经制作了一个梯形，如下面的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

你所建造的不是梯形（又名梯形）形状的元素;它是一个矩形元素，边框样式创建一个梯形的外观。这就是盒子阴影是矩形的原因。

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

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

梯形与css和框阴影

1 个答案: