基本介绍
我们都知道在CSS中可以使用border属性来绘制不同的三角形，那么具体是怎么来实现的呢？我们一起来看看吧！
首先来绘制一个基本的容器:
1
| <div class="triangle"></div>
|
接下来给他加点边框:
1
2
3
4
5
6
7
| .triangle {
width: 80px;
height: 80px;
border-width: 10px;
border-style: solid;
border-color: red green blue pink;
}
|
目前它长这个样子:
接下来，我们把边框的宽度增加为25px：
1
2
3
4
5
| .triangle {
...
border-width: 25px;
...
}
|
可以清楚看到四个角接合的地方其实是斜角，也就是每一个方向的边其实是梯形，而不是长方形。试想一下，如果我们把中间的空白区域拿掉（长宽各为80px的区域）的话，这张图会变成什么样子呢？现在我们把width和height都改为0看看结果：
1
2
3
4
5
| .triangle {
width: 0;
height: 0;
...
}
|
果然，和预想中一样，变成了一个由四个三角形组成的正方形了。
因此，假如我们需要一个剪头向下的三角形，那么我们只需要将左、下、右的边框颜色改为transparent （透明）即可：
1
2
3
4
5
6
7
8
9
10
11
| .triangle {
...
border-color: red transparent transparent transparent;
}
.triangle {
border-top: 25px solid red;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
|
应用案例
一、带有icon的按钮
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
28
29
30
| .btn-more {
background-color: #7d3f98;
color: #fff;
padding: 8px 25px;
width: 60px;
text-align: center;
text-decoration: none;
border-radius: 30px;
font-size: 16px;
position: relative;
}
.btn-more:hover,
.btn-more:active,
.btn-more:focus {
background-color: #511378;
cursor: pointer;
}
.btn-more::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #fff;
position: absolute;
right: 13%;
top: calc(50% - 6px);
}
|
1
| <div class="btn-more">more</div>
|
二、气泡对话框
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
28
29
30
31
32
33
34
| .dialog {
color: #444;
background-color: #ecf5ff;
border: 2px solid #c4e1ff;
border-radius: 10px;
width: 180px;
line-height: 60px;
position: relative;
text-align:center;
margin-top: 30px;
margin-bottom: 30px;
}
.dialog:before,
.dialog:after {
border: solid transparent;
content: "";
width: 0;
height: 0;
position: absolute;
}
.dialog::after {
border-width: 10px 10px 0 10px;
border-top-color: #ecf5ff;
top: 60px;
right: 20px;
}
.dialog::before {
border-width: 13px 13px 0 13px;
border-top-color: #c4e1ff;
top: 60px;
right: 17px;
}
|
1
| <div class="dialog">陷入思考中...</div>
|