纯CSS绘制三角形、梯形及border属性的延伸

德顺

发布于 2019-11-12 17:02:37

2.1K0

发布于 2019-11-12 17:02:37

文章被收录于专栏：前端资源

利用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({});

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

图像处理

css

面向对象编程

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

图像处理

css

面向对象编程

登录后参与评论

0 条评论

热度