如何用CSS画三角形

CSS 画 三角形

先来看一段代码：

<!-- html -->
<div class="div1"></div>

<!-- css -->
.div1{
        width: 20px;
        height: 20px;
        border-left: 20px solid red;
        border-right: 20px solid blue;
        border-top: 20px solid orange;
        border-bottom: 20px solid yellow;
    }

一开始，我以为会是一个宽、高都是20px的div，四边颜色不同，而且边框很粗，但怎么会和三角形有关系。。下图为结果：

很明显，和我想象的结果不一样！！

当我们把宽、高改为0的时候，三角形出现了：
你会发现，每边的三角形的颜色，正对应着每条边框的颜色。

这时候回头看看 border-color 的属性：

其中有一个透明属性 transparent ，当我们设置其中的一边为transparent时，可以猜到，肯定是那一边整个不见了，继续贴代码、贴图：

<!-- 下图CSS代码 -->
.div1{
        width: 0px;
        height: 0px;
        border-left: 20px solid red;
        border-right: 20px solid blue;
        border-top: 20px solid orange;
        border-bottom: 20px solid transparent;
    }

可以很清楚的看到，由于border-bottom的颜色设置成 transparent 时，下方的三角形消失了。

而当我们删除 border-bottom 属性时：

.div1{
        width: 0px;
        height: 0px;
        border-left: 20px solid red;
        border-right: 20px solid blue;
        border-top: 20px solid orange;
    }

div变成了这样：

由此可见，当我们把左右两边的颜色都设置为 transparent 时，左右两边都消失，只剩下最上面一个，尖头向下的三角形。

        .div1-top{
            border-top: 20px solid orange;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

以此类推：
这样，就是三角形的绘制，接下来是应用，先看效果再贴代码。

返回按钮：

原理很简单，就是两个三角形重叠，下面直接贴代码：

<!-- html -->
<div class="nav">
    <div class="nav-return">
        <span class="nav-return-triangle1"></span>
        <span class="nav-return-triangle2"></span>
    </div>
</div>
<!-- css -->
.nav{
    width: 100%;
    height: 60px;
    margin-left:0px;
    background-color: #06c1ae;
    position: relative;
}
.nav-return{
    cursor: pointer;
}
.nav-return-triangle1{
    width: 0px;
    height: 0px;
    position: absolute;
    top:10px;
    left: 10px;
    border-right: 20px solid #fff;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.nav-return-triangle2{
    position: absolute;
    top:10px;
    left: 13px;
    border-right: 20px solid #06c1ae;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

或者可以用伪元素实现对话框：

<!-- html -->
<div class="container"></div>

<!-- css -->
    .container{
        width: 200px;
        min-height: 100px;
        border: 1px solid #cdcdcd;
        position: relative;
    }
    .container:before,.container:after{
        content: '';
        border-color: solid transparent;
        width: 0;
        height: 0;
        position: absolute;
    }
    .container:before{  
        border-top: 15px solid #cdcdcd;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent; 
            top: 100px;  
              left: 150px;
    }

    .container:after{
        border-top: 15px solid #fff;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent; 
               top: 99px;  
              left: 150px;  
    }

以上，就是用css去实现三角形。