共计 1585 个字符，预计需要花费 4 分钟才能阅读完成。
用 CSS 画三角形，利用 border 属性，把一个边设置成看到的款式，其余两边或三边用 transparent 办法变成通明。
一、案例
HTML 代码：
<div></div>CSS 代码：
div {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 70px solid red;
}
HTML 代码：
<div></div>CSS 代码：
div {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 70px solid red;
}
HTML 代码：
<div></div>CSS 代码：
div {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 70px solid red;
}
HTML 代码：
<div></div>CSS 代码：
div {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 70px solid red;
}
HTML 代码：
<div></div>CSS 代码：
div {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
HTML 代码：
<div></div>CSS 代码：
div {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
HTML 代码：
<div></div>CSS 代码：
div {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
HTML 代码：
<div></div>CSS 代码：
div {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}二、原理
首先定义一个 div，且 div 的边框足够厚。
HTML 代码：
<div></div>CSS 代码：
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;
}div 的宽和高各位 100px，边框为 20px，且四边的色彩都不一样。
能够看得出，四边的接合出和四边造成了一个 45°，别离看每一条边都是一个梯形。
这时如果把四条边都持续加粗，变成 50px。
这时看别离看四条边所造成的梯形，咱们设置边框越粗，梯形的上底就越小。
如果咱们把 div 的大小设成 0，只有边框的话。如下图所示：
能够看出是有 4 个等腰三角形组成一个正方形。
这时如果把其余三个边都变成通明（应用 transparent），同时把 div 的背景色去掉，最终就只会看到一个三角形。
须要留神的是，如果要做一个上图这种朝向的三角形（设置底边的色彩），对边能够不设置，但相邻两边肯定要设置厚度和实线（solid），同时相邻两边要设置成通明色（transparent）。
正文完
