CSS：梯形的數值意義

為了某個東西，要用到梯形。沒想到居然麻煩……

下為這個綠色梯形的代碼：
<div style="width: 150px;
border-top-width: 0;
border-bottom-width: 40px;
border-right-width: 15px;
border-left-width: 30px;
border-top-color: green;
border-right-color: transparent;
border-bottom-color: green;
border-left-color: transparent;
border-style: solid;
height: 0px;"></div>


其實這個梯形把它分作兩個三角形 ＋ 一個長方形會很容易理解。
首先是梯形高。
這個高由border-bottom-width控制，所以是40px。
然後，剛才說了這梯形是「作兩個三角形 ＋ 一個長方形」。
其中，長方形的寬就是由width來決定，所以是150px。
左右兩邊的三角形的底則分別由各自的border-width來決定。
當初就是不知道底要分三分數值，於是寫的梯形就過大。


補充一下，如果你有另外設定border-top-width就會變成兩個相連的梯形：

<div style="width: 150px;
border-top-width: 40px;
border-bottom-width: 40px;
border-right-width: 15px;
border-left-width: 30px;
border-top-color: green;
border-right-color: transparent;
border-bottom-color: green;
border-left-color: transparent;
border-style: solid;
height: 0px;"></div>

如果要分開來就修改height：

<div style="width: 150px;
border-top-width: 40px;
border-bottom-width: 40px;
border-right-width: 15px;
border-left-width: 30px;
border-top-color: green;
border-right-color: transparent;
border-bottom-color: green;
border-left-color: transparent;
border-style: solid;
height: 3px;"></div>



知道梯形其實寫三角也很容易，width: 0就可以了。
要倒三角形就border-top-width: 40px;border-bottom-width: 0px;即可。