通过css绘制三角形

利用的主要原理

• border-width
• border-color的 transparent 属性

代码实例

第一种 ：含有宽高的div

#trigger{
    width:100px;
    height: 100px;
    border-style: solid;
    border-width: 100px 100px 100px 100px;
    border-color: red green blue yellow  ;
}

第二种：不含宽高的div

#trigger{
    width:0;
    height: 0;
    border-style: solid;
    border-width: 100px 100px 100px 100px;
    border-color: red green blue yellow  ;
}

第三种：缺少一个border的div

#trigger{
    width:0;
    height: 0;
    border-style: solid;
    border-width: 0 100px 100px 100px;
    border-color: red green blue yellow  ;
}

第四种：缺少两个border的div

#trigger{
    width:0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 100px;
    border-color: red green blue yellow  ;
}

第五种：设置一条边为透明色的div

#trigger{
    width:0;
    height: 0;
    border-style: solid;
    border-width: 0px 0 100px 100px;
    border-color: red green blue transparent  ;
}

第六种：设置两条边为透明色的div

#trigger{
    width:0;
    height: 0;
    border-style: solid;
    border-width: 0px 100px 100px 100px;
    border-color: red transparent blue transparent  ;
}

总结

1、如果想要获取一个直角三角形，至少要有两个border，根据需要的方向不同，选取的border的边也不同。将其中的一条边设置为transparent
2、如果想要一个等边三角形，至少需要三条border，根据需要的方向不同，选取不相邻的两边设置为transparent。