CSS画三角

做静态网页进行练习的时候，发现弹出下拉菜单的三角图标可以用CSS做，对老手来说，这种样式写起来应该是得心应手了，但对我这样的新手来说还挺新奇的。

步骤就是把元素的宽度、高度设为0，然后根据需要的三角形样式为三角形底部设置边框，两腰边框透明即可。

 

例如：

.triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid red;
}

 

 

.triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 50px solid red;
    border-bottom: 50px solid transparent;
}

 

进阶的，还可以做直角三角形。设置border的top或bottom，然后将另一直角边相对的left或right设置为透明即可。

例如：

triangle-topright

.triangle-topright {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
 }

 

triangle-bottomleft

.triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
}

虽然实现难度不大，但是让我见到了CSS多样灵活的用法，也更加需要持续不断的学习和积累。