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

关注

发布于: 2020 年 09 月 04 日

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