如何將css形狀垂直分割爲一半？

Question

請看看以下的jsfiddle鏈接：

http://jsfiddle.net/pnpHS/4/

正如你可以看到它的黃色CSS形狀。

我怎樣才能使它所以其在兩個分開的垂直所以左邊是黃顏色，但對方是透明的？

謝謝！

Answer 1

有相當多的是什麼樣的形狀，你可以在只使用一個單一的元素做的侷限性（如果您將它包裹在另一個元素上，你可以使用隱藏的溢出來包裹它）。

爲了用單個元件實現，則可以通過做到這一點：

• 設置background顏色transparent
• 設置一個border-left至50的元素％的寬度，使用純色作爲先前背景顏色的顏色。

例如：http://jsfiddle.net/pKuj9/

Answer 2

你不能只顯示你描述的形狀的一部分。

您可以描述一個不同的形狀或在你的形狀的一部分敷個面膜，使得它似乎是不存在的。

形狀的面具一半用相同的顏色作爲背景的第二形狀：http://jsfiddle.net/pnpHS/43/

Answer 3

您可以通過定義:before僞類實現這一點（::before僞元素的，如果你選擇跟隨CSS3規範）。

http://jsfiddle.net/pnpHS/60/