梯形帶有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。