html - 带css的三 Angular 形边框装饰

Question

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

这是图片:

提前致谢

Answer 1

我通过混合两个三 Angular 形和一个矩形来制作这个，看看这是否是您想要的 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;
}