CSS3画三角形的相关问题

按照以下教程可以帮助你有效的理解css3绘制三角形的原理，以及有多个案例帮助你掌握这方面的知识

普通矩形添加边框的效果

2017-05-15_145953.png

#demo{
        width: 100px;  
        height: 100px;  
        border:40px solid blue;  
    }

<div id="demo"></div>

去除内部矩形的宽高只留下边框时的效果

2017-05-15_150329.png

#demo{
        width: 0;  
        height: 0;  
        border:40px solid blue;  
    }

<div id="demo"></div>

分开设置边框四条边的颜色会出现以下效果

2017-05-15_152347.png

代码如下

#demo{
        width: 0;  
        height: 0;  
        border-left:40px solid blue;  
        border-right: 40px solid red;
        border-top: 40px solid green;
        border-bottom: 40px solid yellow;
    }

为什么会出现四个三角形的情况呢，我们来看一看当内部矩形的宽高不是0的时候的效果

2017-05-15_152724.png

此时，我们可以看到我们的矩形的外边框都是以梯形的方式拼合在一起的，所以当我们中间的矩形宽高都为0时，就会出现四个三角形的效果，这样，我们想绘制各个朝向的三角形就会简单很多，因为border-color可以设置透明颜色，当其他几个三角形为透明，只有一个为有颜色，这个三角形就绘制成功了

向左的三角形

2017-05-15_153951.png

#demo{
        width:0;
            height:0;
        margin-right: 20px;   
        border:40px solid transparent;  
        border-right: 40px solid purple;  
      }

同理其他方向的三角形也可以用这种方法实现

当我们想实现这个三角形上还有一个边框时，如何实现呢？因为这个三角形本身就是边框画出来的，此时还要在这个上面再加上一层边框，我们只能使用叠加层的方法

2017-05-15_155444.png

.demo{
            width:0;
            height:0; 
            border:40px solid transparent;  
            border-bottom: 40px solid purple;  
            position: relative;
    }
.demo span{
            display:block;
            width:0;
            height:0; 
            border:38px solid transparent;  
            border-bottom: 38px solid green;  
            position: absolute;
            left: -38px;
            top: -37px;
      }

<div class="demo">
        <span></span>
</div>

此处实现两个三角形进行叠加，需要注意的是两个三角形相对位置的布局，这里可以自己进行尝试，实现其他效果

实现一个气泡效果的对话框

2017-05-15_160958.png

#demo{  
    width: 100px;  
    height: 100px;  
    border:2px solid #000;   
    position: relative;  
    }  
#demo:before,#demo:after{  
    content: ' ';  
     position: absolute;  
     left: 101px;  
     border: solid transparent;    
}  
#demo:after{  
    width: 0px;  
    height: 0px;  
    top:20px;  
    border-width: 10px;  
    border-left: 10px solid  #fff;    
}  
#demo:before{  
    width: 0px;  
    height: 0px;  
    top:18px;  
    border-width: 12px;  
    border-left: 12px solid #000;  
}  

<div id="demo"></div>

先画一个矩形框，然后设置before和after两个伪类的所有边框都是透明的，此处重点在于设置这两个伪类元素的位置，相对于矩形框的位置设置，然后画出白色小三角遮挡住黑色大三角线，小三角比大三角小2px正好出现一个完美的气泡

绘制左上角标记小三角

2017-05-15_162201.png

#demo{
        width:0;
        height:0;
        margin-right: 20px;   
        border-right:40px solid transparent; 
        border-left:40px solid purple;  
        border-top: 40px solid purple;  
        border-bottom: 40px solid transparent;
      }

<div id="demo"></div>

此处，大家可以通过调节border不同边框的颜色和透明度组合来形成不同的图形，大家都可以尝试一下