CSS3 画如下图形

问题描述

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

问题解答

css

*,p{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

<p class='demo'></p>回答2：

.trapezoid-1 {

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