在一些面试经验中，经常能看到有关css的题目都会有一道如何使用css绘制三角形，而常见的回答通常也只有使用border进行绘制一种方法。
而css发展到今天，其实有很多有意思的仅仅使用css就能绘制出来的三角形的方式，本文将展示6中使用css绘制三角形的方式，而且它们都很好掌握。
当然本文是抛砖引玉，css日新月异，可能还有一些有意思的方法本文遗漏了，欢迎大家在留言区补充。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三角形的6种方法</title>
<style type="text/css">
#border {
border-top: 50px solid greenyellow;
border-bottom: 50px solid deeppink;
border-left: 50px solid bisque;
border-right: 50px solid chocolate;
height: 0;
width: 0;
}
#lg {
width: 100px;
height: 100px;
background: linear-gradient(45deg, deeppink, deeppink 50%, yellow 50%, yellow 100%);
}
#cg {
width: 100px;
height: 100px;
background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}
#triangle {
width: 150px;
height: 100px;
position: relative;
overflow: hidden;
}
#triangle:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: deeppink;
transform-origin: right top;
transform: rotate(45deg);
}
#clip {
width: 100px;
height: 100px;
background: deeppink;
clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
.normal{
font-size: 100px;
color: deeppink;
}
/* 改变字体效果不一样 */
.n1{
font-family: "agency fb";
}
.n2{
font-family: "arial, helvetica, sans-serif";
}
.n3{
font-family: "bodoni mt black";
}
.n4{
font-family: "calisto mt";
}
.n5{
font-family: "engravers mt";
}
.n6{
font-family: "french script mt";
}
</style>
</head>
<body>
<p>1. 使用border绘制三角形</p>
<div id="border"></div>
<p>2. 使用linear-gradient绘制三角形</p>
<div id="lg"></div>
<p>3. 使用conic-gradient绘制三角形</p>
<div id="cg"></div>
<p>4. transform:rotate配合overflow:hidden绘制三角形</p>
<div id="triangle"></div>
<p>5. 使用clip-path绘制三角形</p>
<div id="clip"></div>
<p>6. 利用字符绘制三角形</p>
<div class="normal n1">◄</div>
<div class="normal n2">►</div>
<div class="normal n3">▼</div>
<div class="normal n4">▲</div>
<div class="normal n5">⊿</div>
<div class="normal n6">△</div>
</body>
</html>
效果图 如下
