如何使用CSS画三角形

如何使用CSS画三角形?

三角形的画法

一般经常使用三角形作为提示框、下拉菜单等功能。
1、HTML结构

1
2
3
4
5
6
7
8
<div class="item0">
</div>
<div class="item1">
</div>
<div class="item2">
</div>
<div class="item3">
</div>

2、将类名为item的块级元素的width、height设置为0

1
2
3
4
.item0{
width:0;
height:0;
}

3、将类名为item的元素的3个border的颜色设置为transparent,箭头指向的对面border设置颜色;

1
2
3
4
5
6
7
8
9
  .item0{
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 80px solid blue;
background: white;
}

上面的为方向向上的三角形
4、依次类推可以画出方向向左、右、下的三角形

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
  .item1{
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid green;
border-bottom: 50px solid transparent;
background: white;
}
.item2{
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 80px solid violet;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
background: white;
}
.item3{
width: 0px;
height: 0px;
border-left: 80px solid purple;
border-right: 50px solid transparent;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
background: white;
}
文章目录
  1. 1. 三角形的画法
本站访客数人次