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

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 
}

咱们会发现每一个边框给咱们呈现出的是一个有棱角的四边形的渲染效果，接下来咱们把这个模块的width和height都设为0，看下效果：

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;
}