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