如何将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/