在CSS中制作一个V形尖头块

Question

是否有可能在纯CSS中制作如下所示的形状？我怎么能去做呢？

我想在坚实的背景上放置一个水平的实心块，一端的人字形与主块隔开。

Answer 1

只需几个背景渐变即可完成此任务：

div {
    width: 300px;
    height: 50px;
    background-color: black;
    background-image:
        linear-gradient( -45deg, white 25px, transparent 25px),
        linear-gradient(-135deg, white 25px, transparent 25px),
        linear-gradient( -45deg, black 40px, transparent 40px),
        linear-gradient(-135deg, black 40px, transparent 40px),
        linear-gradient( -45deg, white 50px, transparent 50px),
        linear-gradient(-135deg, white 50px, transparent 50px);
}

小提琴：http://jsfiddle.net/jonathansampson/fxj3u/

上面的代码没有linear-gradient所需的任何供应商前缀。要在项目中使用它，您需要提供所有前缀，或者您只需引用-prefix-free之类的工具（这就是我使用的）。

Answer 2

你可以，你需要用几种不同的形状来构造它。您想按此顺序制作这些形状：

1. 黑色矩形
2. 紫色背景的黑色三角形
3. 黑色背景的紫色三角
4. 紫色背景的黑色三角形

查看http://css-tricks.com/examples/ShapesOfCSS/有关如何创建形状的信息。如果你遇到困难，可以试试看你的CSS / Markup吧。

有些事要厌倦：你可能需要使用float:left;所以形状彼此相邻，两者之间没有任何差距。