一、原理
三角形实现原理：宽度width为0；height为0；
（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。
（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。
更详细的原理解析请见博客：css3画三角形的原理
transparent属性代表着全透明黑色，即一个类似rgba(0,0,0,0)这样的值。
二、实现
1、正三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画三角形</title>
<style>
.triggle{
width: 0px;
height: 0px;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-bottom: 50px solid red;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<div class="triggle"></div>
</body>
</html>
运行效果：
2.倒三角形
.triggle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid red;
}
运行效果：
3.直角三角形
原理：只设置元素上边（下边）部分和右边（左边）部分的border会呈现一个矩形，隐藏其中一部分就会得到一个直角三角形。
.triggle{
width: 0;
height: 0;
height: 0;
border-top: 50px solid red;
border-right: 100px solid blue;
}
运行效果：
.triggle{
width: 0;
height: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid blue;
}
运行效果：
.triggle{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
运行效果：
.triggle{
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
运行效果：
延申：实现空心三角形
空心的三角形同理，在当前的三角形后面添加一个空心三角形，然后将这个三角形绝对定位到当前三角行的位置切割。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画三角形</title>
<style>
.triggle{
position: relative;
height: 0px;
width: 0px;
border-top: 90px solid transparent;
border-right: 100px solid black;
border-bottom: 100px solid transparent;
}
.triggle:after{
content: '';
position: absolute;
top: -89px;
left: 2px;
border-top: 89px solid transparent;
border-right: 99px solid #FFFFFF;
border-bottom: 99px solid transparent;
}
</style>
</head>
<body>
<div class="triggle"></div>
</body>
</html>
运行效果：
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
