使用border画三角形
思路1: border四个边框分别设置, 可以把其中三个设置成透明
结构: <div class="box"></div>
样式:
```
.box1 {
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid yellow;
}
```
效果图:
思路2: 只设置相邻两条边
.box2 {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid yellow;
}
思路3: 设置3条边
.box3 {
width: 0px;
height: 0px;
border-top: 100px solid red;
border-right: 50px solid yellow;
border-left: 50px solid green;
}
网友评论