1、简单三角形的实现
使用CSS中的border（边框）即可实现如下所示的三角形：
实现原理如下：
首先为元素添加border：
<div class="big"></div>.big{width: 100px;height: 100px;border: 3px solid plum;}
效果图如下：
这是我们平常使用border时看见的普遍的情况，大家理所当然认为border是由矩形边框组成，实际上，元素的border是由三角形组合而成，为了验证这个结论，可以增大border的宽度，并为各border边设置不同的颜色：
.big{width: 100px;height: 100px;border: 50px solid;border-color: plum pink paleturquoise peachpuff;}
效果图如下：
将div宽高置为0会发生怎样神奇的事情呢？？？
.big{width: 0px;height: 0px;border: 50px solid;border-color: plum pink paleturquoise peachpuff;}
效果图！！！
我们惊奇的发现，此时的元素由四个三角形拼接而成，为实现最终效果，可以保留一边，将剩余的边框设置成白色或者透明色，为了节省空间，可以将上下左右任意一边的border边框置为0。
.big{width: 0px;height: 0px;border-width: 82px 82px 0 82px;border-style: solid;border-color: plum transparent transparent transparent;position: relative;}
效果图如下：
2、边框三角形的实现
带边框的三角形是指为三角形添加其它颜色的边框，由于不能继续通过为已有三角形设置border的方法来为其设置边框，所以这里采用绝对定位和相对定位来实现如下效果。
大三角形采用绝对定位，小三角形需要参照大三角形的位置，所以采用相对定位，之后利用相对定位的四个属性top、bottom、left、right来调整小三角形的位置。
<!DOCTYPE html><html lang="en"><head><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>Document</title><style>.big{width: 0px;height: 0px;border-width: 82px 82px 0 82px;border-style: solid;border-color: plum transparent transparent transparent;position: relative;}.small{width: 0px;height: 0px;border-width: 76px 76px 0 76px;border-style: solid;border-color:pink transparent transparent transparent;position: absolute;bottom: 4px;left: -76px;} </style></head><body><div class="big"><div class="small"></div></div></body></html>
