纯CSS绘制三角形、梯形及border属性的延伸
纯CSS绘制三角形、梯形及border属性的延伸
利用CSS实现三角形效果，比较常用的思路是使用 border 边框来实现，border 边框是由四个三角形组成的，通过调整四个边来实现不同形状的三角形。
通过上图应该能看懂 border 的实现原理。
CSS代码如下：通过调整边框的宽度，来实现不同的形状。
/*A1*/
.triangle1 {
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: #118C8B #BCA18D #F2746B #F14D49;
}
/*A2*/
.triangle2 {
width: 0;
height: 0;
border-width: 50px;
border-left: 100px;/*左边框设置为100px*/
border-style: solid;
border-color: #118C8B #BCA18D #F2746B #F14D49;
}
/*A3*/
.triangle3 {
width: 0;
height: 0;
border-width: 0 50px 100px 50px;/*上边框为0，下边框为100px*/
border-style: solid;
border-color: #118C8B #BCA18D #F2746B #F14D49;
}
三角形的实现：
只需要把其中三条边的颜色定义为 transparent 透明，另一条边设置一个颜色和宽度就可以了。（图P1）
.triangle4 {
width: 0;
height: 0;
border-style: solid;
border-width: 50px;
border-color: transparent transparent #F14D49;
}如果不定义宽度，则该条边默认宽度位0，颜色为透明。
通过定义宽度，改变三角形的形状（该边框的宽度就是三角形底边的高）。宽度越大，三角形的高度越大。（图P2）
.triangle5 {
width: 0;
height: 0;
border-style: solid;
border-width: 0 50px 100px;
border-color: transparent transparent #F14D49;
}直角三角形：
如果把左边框宽度也设置为 0 ，就会形成一个向右的直角三角形。（图P3）
.triangle6 {
width: 0;
height: 0;
border-style: solid;
border-width: 0 80px 100px 0;
border-color: transparent transparent #BCA18D;
}不规则三角形：
如果左右宽度不对称，就会形成一个不规则三角形。（图P4）
.triangle7 {
width: 0;
height: 0;
border-style: solid;
border-width: 0 80px 100px 20px;
border-color: transparent transparent #BCA18D;
}梯形的实现：
上、右两边透明，右、下、左设置宽度，就会形成一个梯形（只能是直角梯形）。（图P5）
}
.triangle8 {
width: 0;
height: 0;
border-style: solid;
border-width: 0 60px 80px 40px;
border-color: transparent transparent #118C8B #118C8B;
}分别设置每个边的样式：
还有另一种写法，就是四个边分开写样式。P1 就可以这样写：（图P6）
.triangle9 {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #BCA18D;
border-left: 50px solid transparent;
}P2可以这样写，因为上边距是 0，可以直接省略。
.triangle9 {
width: 0;
height: 0;
border-right: 50px solid transparent;
border-bottom: 100px solid #BCA18D;
border-left: 50px solid transparent;
}border 属性延伸：
因为三角形的绘制与 border 属性分不开的，下面就整理一下，希望看完对上面的代码有更深入的理解。
border 属性，有四个属性值：
可以一气呵成，这样写：顺序分别是 边框宽度 边框样式 边框颜色
border: 1px solid blue;当然也可以分开来写，如下：
border-width 边框的宽度。
只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0，不支持负值。
border-width: 10px;/*统一设置边框的宽度*/
border-width: thin medium thick 10px;/*分别设置每个边框的宽度，顺序是 上 右 下 左*/
border-width: thin medium;/*当有2个值时代表，上下 左右*/
border-width: thin medium 10px;/*当有3个值时代表，上 左右 下*/边框宽度有5个属性值：
thin 细的边框。
medium 默认，中等的边框。
thick 粗的边框。
length 自定义边框的宽度。
inherit 从父元素继承边框宽度。
border-style 边框的样式。
用法与 border-width 类似，边框样式有以下几种：
none 无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 点状边框。在大多数浏览器中呈现为实线。
dashed 虚线。在大多数浏览器中呈现为实线。
solid 实线。
double 双线。双线的宽度等于 border-width 的值。
groove 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 3D 垄状边框。其效果取决于 border-color 的值。
inset 3D inset 边框。其效果取决于 border-color 的值。
outset 3D outset 边框。其效果取决于 border-color 的值。
inherit 从父元素继承边框样式。
border-color 边框的颜色。
用法也与 border-width 类似，边框颜色有以下几种：
color_name 颜色值为颜色名称的边框颜色（比如 red）。
hex_number 颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number 颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent 默认值。边框颜色为透明。
inherit 从父元素继承边框颜色。
inherit 从父元素继承 border 属性的设置。
边框的应用有很多，可以根据自己的情况进行拓展。
声明：本文由w3h5原创，转载请注明出处：《纯CSS绘制三角形、梯形及border属性的延伸》 https://cloud.tencent.com/developer/article/1537403
(adsbygoogle = window.adsbygoogle || []).push({});腾讯云开发者
