与css的三角边界装饰品

Question

我正在尝试使用html / css制作某种“三角形装饰”栏。你能告诉我怎么做吗？

这是图片：

提前致谢

Answer 1

如果您想使用一个元素，请查看Pseudo-elements - CSS | MDN

HTML：

   <figure></figure>

DEMO 1使用Background-image

figure{
    width:320px;
    height:64px;
    background:blue; 
    position:relative;
    margin:40px auto;
}

figure:before{
    content: '';
    position: absolute;
    left: -60px;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(32deg, transparent 50%, blue 0%),linear-gradient(147deg, transparent 50%, blue 0%);
}

DEMO 2使用2个元素

CSS：

figure{
    width:320px;
    height:64px;
    background:blue; 
    position:relative;
    margin:40px auto;
}

figure:before, figure:after{
    content:'';
    position:absolute;
    display:block;
    left: -40px;
    width:0;
    height:0;
    border-left: 40px solid transparent;
    border-right: 0px solid transparent;
}

figure:before{
    top: 0;
    border-top: 32px solid blue;
}

figure:after{
    bottom: 0;
    border-bottom: 32px solid blue;

}

Answer 2

我通过混合两个三角形和一个矩形来看看这是否是你想要的http://jsfiddle.net/xkwbt73v/5/ HTML

<div id="triangle-left"></div>
<div id="triangle-left-down"></div>
<div id="bar"></div>

CSS

#triangle-left {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;

}

#triangle-left-down {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;

}

#bar{
width:1000px;
height:200px;
background-color:red;
position:absolute;
margin-left:100px;
margin-top:-200px;
}

Answer 3

http://jsfiddle.net/5p4yLrz4/：）

HTML：

<div class="wrapper">
    <div class="triangle"></div>
</div>

CSS：

.wrapper{
    width:300px;
    background-color:orange;
}
.triangle {
   width:0;
   border-width: 30px;
   border-right:0px;
   border-color: transparent transparent transparent yellow;
   border-style: solid;   
}