梯形带有CSS和箱形阴影

Question

我正在寻找一个箱形阴影的顶部比底部宽10px的梯形。在过去，我已经制作了一个梯形，如下面的jsfiddle所述，但是您会注意到，如果将一个阴影放到元素上，它会将外部宽度放在一个矩形中，而不是将阴影放在倾斜的边框上：

#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。