使用css绘制正三角形的三种方法：
1：transform属性绘制
```html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>使用css transform属性画正三角形
body {
display:flex;
}
.box1,
.box1::after,
.box1::before {
width:52px;
height:52px;
position:relative;
background-color:red;
overflow:hidden;
float:left;
}
.box1::after,
.box1::before {
content:"";
position:absolute;
background-color:#fff;
transform-origin:bottom right;
transform:rotate(60deg)scaleX(1.2);
}
.box1::before {
transform-origin:left bottom;
transform:rotate(-60deg)scaleX(1.2);
}
<div class="box1">
</html>
```
一般情况下这种就足够了，但只适合白色背景的页面
当加上背景和边框后：
2： boder属性绘制
```html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>使用css border属性画正三角形
body {
background-color:skyblue;
display:flex;
}
.box1 {
width:0;
height:0;
border-top:0 solid transparent;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-bottom:173px solid #0f0;
}
<div class="box1">
</html>
```
border-bottom 为 border-left *
能用于绝大多数应用场景，但无法加边框
3. clip-path属性
```html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>使用css clip-path属性画正三角形
body {
background-color:skyblue;
display:flex;
}
.box {
width:200px;
height:200px;
position:relative;
}
.box1 {
width:100%;
height:100%;
clip-path:polygon(
50%13.4%,
100%100%,
0 100%,
50%13.4%,
50%33.4%,
17.3%90%,
82.7%90%,
50%33.4%,
50%13.4%
);
background:darkblue;
}
.box2 {
width:100%;
height:100%;
clip-path:polygon(
50%33.4%,
17.3%90%,
82.7%90%,
50%33.4%
);
content:"";
position:absolute;
top:0;
background-color:rgba(255, 0, 0, 0.2);
}
<div class="box">
<div class="box1">
<div class="box2">
</html>
```
首先绘制一个三角形的环 box1, 再将三角形定位到环的中间，避免了两个rgba颜色的三角形颜色叠加。
