CSS常用样式——绘制各种角度的三角形（1）

作者：程序员学院
官方网址：www.chengxuyuan.com

1、前言

在制作前端项目时，我们经常会遇到制作下拉功能时有个小三角，除了我们用图片背景或者iconFont之外，我们可以用CSS来实现。

2、实现效果

HTML代码：

<div class="demo_0"></div>

CSS代码：

.demo_0 { 
    width: 100px; 
    height: 100px;
    margin: 100px auto; 
    border: 20px solid transparent; 
    border-color: black blue chocolate coral 
}

CSS代码：

.demo_0 { 
    width: 0; 
    height: 0;
    margin: 100px auto; 
    border: 20px solid transparent; 
    border-color: black blue chocolate coral 
}

这时我们发现渲染出的效果是不是有四个三角形状的图像，这就是我们模块width和height都设为0时，我们给它设置边框的渲染效果。
接下来我们把某一个方向的border的border-width设为0来看下效果：

CSS代码：

.demo_0 { 
    width: 0; 
    height: 0;
    margin: 100px auto; 
    border: 20px solid transparent; 
    border-color: black blue chocolate coral;
    border-bottom:0;
}

到这里我们就可以总结出：

（1）制作三角形需要将该模块：宽度width为0，高度height为0；

（2）制作不同方向的类似等腰三角形时，需要将某一个方向的border-方向：高度 solid coral,相对方向border-相对方向不设置任何参数，其他方向的border-其他方向：**不同高度** solid **transparent**；进设置三个方向即可。

（3）制作不同方向的类似直角三角形时，需要将上下某一个方向的border-(top|bottom)：高度 solid coral,左右某一方向的border-(left|right)：**相同高度** solid **transparent**;仅设置两个方向即可。

3、效果实现

（1）Triangle Up

.triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid coral;
}

（2）Triangle Down

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

（3）Triangle Left

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

（4）Triangle Right

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

（5）Triangle Top Left

.triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid coral;
    border-right: 100px solid transparent;
}

（6）Triangle Top Right

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

（7）Triangle Bottom Left

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

（8）Triangle Bottom Right

.triangle-bottomRight {
    width: 0;
    height: 0;
    border-bottom: 100px solid coral;
    border-left: 100px solid transparent;
}