举例说明

第一种

<style>
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid red; //二边的宽度设为底边的一半
</style>

第二种

<style>
 width: 0;
 height: 0;
 border-color: transparent transparent transparent red;
 border-width: 17px 0 17px 8px;
 border-style: solid;
</style>

第三种

上图效果的做法是这样的：

1.、两个三角形（底边框）的位置、大小要一致

2、里面的三角形的底边框颜色为黑色（也可以为其它颜色），外面三角形边框颜色为白色的背景

3、白色三角形要覆盖黑色三角形就能形成这样的形状了，关于覆盖的问题可以使用标签的位置或z-index来改变。

html代码

<div class="line">
 <div class="box b1"></div>
 <div class="box b2"></div>
 </div>

css代码

<style>
 .line {
 position: relative;
 box-sizing: content-box;
 width: 100px;
 height: 1px;
 border-bottom: 1px solid gray;
 }
 .box {
 position: absolute;
 left: 30px;
 top: -10px;
 width: 0;
 height: 0;
 border: 6px solid transparent;
 }
 .b1 {
 border-bottom-color: #000;
 }
 .b2 {
 border-bottom-color: #fff;
 }
 </style>

同样位置、大小的元素，为什么白色元素覆盖黑色元素就形成这样的缺口了？按理说应该是白色全覆盖黑色才对！

应该是浏览器渲染的规则所为！但是IE9以下的版本并不支持的

纯CSS创建一个三角形的原理

举例说明