css - 在 CSS 中制作一个雪佛龙尖块

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/标记。

需要厌倦的东西：你可能需要使用float:left;这样的形状彼此相邻，它们之间没有任何间隙。