【前端小技巧】用border画三角形和梯形

本文最后更新于:星期五, 十二月 31日 2021, 10:06 晚上

前言

我们组要招一个前端开发,我也借此机会整理了一下前端的基础知识。否则在面试的时候如果被别人问倒了,人家还以为我们公司没有技术大牛的。

在复习 CSS 基础的时候,我被一个网友的奇思妙想震惊了,居然可以用 border 来画三角形。在此之前,我都只是用 border 来打框框的。-.-!!


正文

我们比较常规的用法,就是用 border 属性来设置边框,如下所示:

1
2
3
4
5
div {
width: 100;
height: 100;
border: 1px solid;
}

image

现在,为了便于观察,我们将四条边设置为不同的颜色,如下所示:

1
2
3
4
5
6
7
8
div {
width: 100;
height: 100;
border-top: 1px solid red;
border-left: 1px solid orange;
border-right: 1px solid green;
border-bottom: 1px solid blue;
}

image

注意,神奇的事情即将发生。将边框加粗,如下所示:

1
2
3
4
5
6
7
8
div {
width: 100;
height: 100;
border-top: 50px solid red;
border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
}

image

看到了吗?出现了 4 个梯形。接着,将长度和宽度缩小,如下所示:

1
2
3
4
5
6
7
8
div {
width: 10;
height: 10;
border-top: 50px solid red;
border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
}

image

梯形的短边越来越短,直到为 0,三角形就出现了。那么,设置长度和宽度为 0,如下所示:

1
2
3
4
5
6
7
8
div {
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid orange;
border-right: 50px solid green;
border-bottom: 50px solid blue;
}

image

此时,四个方向的三角形就形成了,想要展示哪个三角形,只需要将其他三个设置为透明即可,如下所示:

1
2
3
4
5
6
7
8
div {
width: 0;
height: 0;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
}

image

甚至,各种三角形、梯形的组合形态都可以随意拼接,如下所示:

1
2
3
4
5
6
7
8
div {
width: 0;
height: 0;
border-top:50px solid red;
border-left:50px solid transparent;
border-right:50px solid green;
border-bottom:50px solid transparent;
}

image


1
2
3
4
5
6
7
8
div {
width: 100;
height: 0;
border-top:50px solid red;
border-left:50px solid transparent;
border-right:50px solid green;
border-bottom:50px solid transparent;
}

image


1
2
3
4
5
6
7
8
div {
width:100;
height:0;
border-top:100px solid red;
border-left:20px solid yellow;
border-right:20px solid green;
border-bottom:0px solid transparent;
}

image


结尾

CSS 真是强大啊,感觉只要技术够牛,就可以用 CSS 画任意图形。最后,附上网友用 CSS 画的蓝胖子。
image


更多编程教学请关注公众号:潘高陪你学编程

image



本文标题:【前端小技巧】用border画三角形和梯形
文章作者:
发布时间:2021年12月09日 - 21:30:22
最后更新:2021年12月31日 - 22:06:38
原始链接:https://blog.pangao.vip/%E3%80%90%E5%89%8D%E7%AB%AF%E5%B0%8F%E6%8A%80%E5%B7%A7%E3%80%91%E7%94%A8border%E7%94%BB%E4%B8%89%E8%A7%92%E5%BD%A2%E5%92%8C%E6%A2%AF%E5%BD%A2/
许可协议:署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。
潘高 微信支付

微信支付

潘高 支付宝

支付宝