CSS实现三角形

每天一个前端面试题之 用CSS作出三角形

一、通过border和transparent实现

这么做的原理是因为：CSS是这样给盒子添加边框的：

        width: 50px;
		height: 50px;
		border-top: 30px solid red;
		border-right: 30px solid blue;
		border-bottom: 30px solid green;
		border-left: 30px solid yellow;

可以看到两个相邻边框处CSS的处理方式是各占1/2，而不是谁覆盖谁。所以，当盒子的长宽都是0的时候，每一个边框都是个等腰直角三角形，如果通过transparent隐藏三个边框，则留下的那个边框就是一个三角形。

        div{
   
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height:0;
            border-top: 0px solid transparent; /*将上边框设置为0可以使三角形贴着上边，也可以通过定位或者margin实现*/
            border-right: 20px solid transparent;
            border-bottom: 20px solid green; 
            border-left: 20px solid transparent;
            }

如果想得到一个空心三角形，可以使两个三角形叠加，重叠的地方消失就好了
比如：

        .b1{
    /*第一个长宽为0的盒子&#x