css3小三角形运用

<style>
    .triangle{
        width: 100px;
        height: 100px;
        border: 30px solid palegreen;
        margin: 0 50px;
    }
</style>
<div class="triangle"></div>

效果图：

接下来将边框高度设置为0，各条边设置不同色值：

<style>
    .triangle{
        width: 0;
        height: 0;
        margin: 0 50px;
        border-top: 30px solid palegreen;
        border-right: 30px solid deepskyblue;
        border-bottom: 30px solid palevioletred;
        border-left: 30px solid peru;
    }
</style>
<div class="triangle"></div>

效果图：

效果上有4个小三角了，就可以根据需要将某3个三角形设置透明度为0即可；

.triangle-left,.triangle-right,.triangle-bottom,.triangle-top{
        width: 0;
        height: 0;
        margin: 0 50px;
        border: 30px solid transparent;
    }
    .triangle-left{
        border-left: 30px solid peru;
    }
    .triangle-right{
        border-right: 30px solid palevioletred;
    }
    .triangle-bottom{
        border-bottom: 30px solid deeppink;
    }
    .triangle-top{
        border-top: 30px solid palegreen;
    }
</style>
<div class="triangle-left"></div>
<div class="triangle-top"></div>
<div class="triangle-right"></div>
<div class="triangle-bottom"></div>