用 CSS 画三角形，利用 border 属性，把一个边设置成看到的样式，其他两边或三边用 transparent 方法变成透明。
<div></div>
<style>div { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 70px solid red;}</style>
复制代码
<div></div>
<style>div { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 70px solid red;}</style>
复制代码
<div></div>
<style>div { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 70px solid red;}</style>
复制代码
<div></div>
<style>div { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 70px solid red;}</style>
复制代码
<div></div>
<style>div { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 70px solid red;}</style>
复制代码
<div></div>
<style>div { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent;}</style>
复制代码
<div></div>
<style>div { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent;}</style>
复制代码
<div></div>
<style>div { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}</style>
复制代码
原理：
首先定义一个 div，且 div 的边框足够厚。
<div></div>
<style>div { width: 100px; height: 100px; background: #15A892 border-top: 20px solid #1574A8; border-right: 20px solid #E94E65; border-bottom: 20px solid #E9D24E; border-left: 20px solid #A81574;}</style>
复制代码
div 的宽和高各位 100px，边框为 20px，且四边的颜色都不一样。
可以看得出，四边的接合出和四边形成了一个 45°，分别看每一条边都是一个梯形。
这时如果把四条边都继续加粗，变成 50px。
这时看分别看四条边所形成的梯形，我们设置边框越粗，梯形的上底就越小。
如果我们把 div 的大小设成 0，只有边框的话。如下图所示：
这时如果把其他三个边都变成透明（使用 transparent），同时把 div 的背景色去掉，最终就只会看到一个三角形。
需要注意的是，如果要做一个上图这种朝向的三角形（设置底边的颜色），对边可以不设置，但相邻两边一定要设置厚度和实线（solid），同时相邻两边要设置成透明色（transparent）。
评论