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;

}

    .demo{

        width:100px;

        height:50px;

        border-top:1px solid black;

        margin:200px;

        position: relative;

    }

    .demo::before{

        content: "";

        width: 50px;

        height: 50px;

        border-left: 1px solid black;

        transform: rotate(45deg);

        position: absolute;

        top: 10px;

        left: -25px;

        

    }

    .demo::after{

        content: "";

        width: 50px;

        height: 50px;

        border-top: 1px solid black;

        transform: rotate(45deg);

        position: absolute;

        top: 10px;

        right: -25px;        

    }

html

<div class="demo"></div>