請教一下CSS3怎么畫出如下的tab，其中一個的樣式即可
2 回答
天涯盡頭無女友
TA貢獻1831條經驗 獲得超9個贊
.trapezoid-1 {
height: 0; width: 100px; border-bottom: 100px solid #e5c3b2; border-left: 60px solid transparent; border-right: 60px solid transparent; }
繁星coding
TA貢獻1797條經驗 獲得超4個贊
*,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>
- 2 回答
- 0 關注
- 772 瀏覽
添加回答
舉報
提交
取消