css使用border画三角形

前端中的不少地方都会用到三角形，好比tooltip等
CSS中建立三角形的方法不少，能够参考这里：

CSS建立三角形（小三角）的几种方法

比较简单实用的仍是使用border来建立三角形，今天主要研究这个的实现
将边框分别设置为红/黄/蓝/绿

.triangle {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 40px;
}

效果以下：

四个三角形合成一个正方形，大小为80x80，若是咱们只想保留其中某个三角形的话，将其它的设置为透明便可，好比(如下css未改变部分与上面相同)

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-width: 40px 40px 40px 40px;
}

效果：

IE6不支持transparent，因此不会透明而会显示难看的黑色，不过也有解决方法：将透明的部分对应的border-style设为dashed便可

.triangle {
    border-color: #ff0000 transparent transparent transparent;
    border-style: solid dashed dashed dashed;
    border-width: 40px 40px 40px 40px;
}

正方形按对角线平分为两个三角形的状况

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 0 40px 40px;
}

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 0 40px 40px 0;
}

须要指出的是，此时正方形的大小为40x40

若是将border-width的某一边设为0又会怎么样呢？也算是两种状况

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 0 40px;
}

.triangle {
    border-color: #ff0000 #ffff00 #0000ff #008000;
    border-style: solid;
    border-width: 40px 40px 40px 0;
}

结果是长方形，其中一边为80一边为40。宽度被设为0的边框对应方向的边框会造成较大的三角形，且长度加倍

segmentfault的"采纳"的显示其实也是用三角形实现的

上部分是包含'采纳'两个字的块状元素，设置position: relative。下部分用伪类after设置一个position: absolute的块状元素，将二者接在一块儿。经过border-width设置成长方形而不是正方形，再将下方的三角形去掉便可，看下面的css十分明显，这也是三角形的一个很好的应用

.accepted-flag:after {
    position: absolute;
    left: 0;
    top: 25px;
    content: '';
    border-width: 9px 18px;
    border-style: solid;
    border-color: #009a61 #009a61 transparent #009a61;
}