CSS 实现三角形

HTML

1
2
3
4
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box {
width: 0px;
height: 0px;
overflow: hidden;
border-width: 10px;
border-style: solid;
}
.box1 {
border-color: transparent transparent red transparent;
}
.box2 {
border-color: red transparent transparent transparent;
}
.box3 {
border-color: transparent red transparent transparent;
}
.box4 {
border-color: transparent transparent transparent red;
}

效果