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

利用CSS实现三角形效果,比较常用的思路是使用 border 边框来实现,border 边框是由四个三角形组成的,通过调整四个边来实现不同形状的三角形。


纯CSS绘制三角形、梯形及border属性的延伸 HTML笔记 第1张

通过上图应该能看懂 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;
}

纯CSS绘制三角形、梯形及border属性的延伸 HTML笔记 第2张

三角形的实现:

只需要把其中三条边的颜色定义为 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 属性的设置。

边框的应用有很多,可以根据自己的情况进行拓展。

赞 (5)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)