CSS3 画如下图形

Question

请教一下CSS3怎么画出如下的tab，其中一个的样式即可

Answer 1

.trapezoid-1 {        height: 0;                 width: 100px;                 border-bottom: 100px solid #e5c3b2;                 border-left: 60px solid transparent;                 border-right: 60px solid transparent;     }

Answer 2

*,div{margin:0;padding:0;}&nbsp; &nbsp; .demo{&nbsp; &nbsp; &nbsp; &nbsp; width:100px;&nbsp; &nbsp; &nbsp; &nbsp; height:50px;&nbsp; &nbsp; &nbsp; &nbsp; border-top:1px solid black;&nbsp; &nbsp; &nbsp; &nbsp; margin:200px;&nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; }&nbsp; &nbsp; .demo::before{&nbsp; &nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; &nbsp; width: 50px;&nbsp; &nbsp; &nbsp; &nbsp; height: 50px;&nbsp; &nbsp; &nbsp; &nbsp; border-left: 1px solid black;&nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(45deg);&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; left: -25px;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; .demo::after{&nbsp; &nbsp; &nbsp; &nbsp; content: "";&nbsp; &nbsp; &nbsp; &nbsp; width: 50px;&nbsp; &nbsp; &nbsp; &nbsp; height: 50px;&nbsp; &nbsp; &nbsp; &nbsp; border-top: 1px solid black;&nbsp; &nbsp; &nbsp; &nbsp; transform: rotate(45deg);&nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; top: 10px;&nbsp; &nbsp; &nbsp; &nbsp; right: -25px; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; }html<div&nbsp;class="demo"></div>