有可能在div背景中制作一个三角形图案，只有css3 / html？怎么样？

Question

我需要为一个div创建一个图案背景，具有流体宽度。像背景图像。我想要，如果有可能只做css3，怎么做。

三角形：高度：27px宽度：46px

Answer 1

这可以通过重复背景来实现。

CSS

.pattern {
    background-image: linear-gradient(319deg, black 16px, transparent 17px), linear-gradient(39deg, black 16px, transparent 17px);
    background-size: 54px 23px;
    background-repeat: repeat-x;
    height: 100px;
}

您需要2个不同的背景，三角形的每一半都有一个背景。角度和大小是棘手的部分。

浏览器请求：多个背景图片，渐变。

我已经为渐变设置了最后一个w3c语法，你可以使用前缀版本在旧版浏览器中使用

fiddle

Answer 2

这会创建一个尺寸为u的三角形

width: 0px;
background-color:#423434;
height: 0px;
border-style: solid;
border-width: 27px 23px 0 23px;
border-color: #ffffff transparent transparent transparent;

Answer 3

是的！

HTML

    <div id="leftTri"></div>
    <div id="tri"></div>
    <div id="rightTri"></div>

CSS

    #leftTri{
        width:0;
        height:0;
        border-bottom:27px solid green;
        border-right:46px solid transparent;
        float:left;
    }

    #tri{
        width:0;
        height:0;
        border-bottom:27px solid green;
        border-left:46px solid transparent;
        border-right:46px solid transparent;
        float:left;
    }

    #rightTri{
        width:0;
        height:0;
        border-bottom:27px solid green;
        border-left:46px solid transparent;
        float:left;
    }

这是一个指向JSFiddle的链接http://jsfiddle.net/Fdng8/2/

Answer 4

是的。您甚至可以使用三角形生成器here