border绘制三角形

藻丫

已于 2023-09-15 17:06:27 修改

阅读量262

点赞数

分类专栏： css 文章标签： css html 前端

于 2022-07-30 16:08:52 首次发布

本文链接：https://blog.csdn.net/qq_51442463/article/details/126072710

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

搞懂CSS属性border相交画三角形的原理及规律

分界线原则：假如把有宽度的border靠外的一边叫做外边，靠内的一边叫做内边，则各个外边的交点与相对应各个内边交点的连线就是各border之间的分界线。

2.一刀切原则：某方向的border宽度如果为0，边框的样式会表现出一刀切的样子

绘制三角形

设置border上下左右的边框宽度和颜色

 <div class="box"></div>

.box {
            width: 20px;
            height: 20px;
            background-color: yellow;
            border-top: 10px solid red;
            border-left: 10px solid green;
            border-right: 10px solid blue;
            border-bottom: 10px solid black;
        }

效果图体现了分界线原则

将div盒子宽高都设置为0，出现4个三角形

.box {
            width: 0px;
            height: 0px;
            /* background-color: yellow; */
            border-top: 10px solid red;
            border-left: 10px solid green;
            border-right: 10px solid blue;
            border-bottom: 10px solid black;
        }

如果我们想要下边的黑色三角形，便将上左右边框的颜色设置为透明。

.box {
            width: 0px;
            height: 0px;
            /* background-color: yellow; */
            border-top: 10px solid transparent;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid black;
        }

一刀切原则：

 .box {
            width: 0px;
            height: 0px;
            /* background-color: yellow; */
            border-left: 10px solid green;
            border-right: 10px solid blue;
            border-bottom: 10px solid black;
        }

去掉上边框后，可继续将左右边框的的颜色设置为透明，依旧能得到下边的黑色三角形。

我们试着改变边框的宽度或者隐藏其它边，可以得到不同形状的三角形。

.box {
            width: 0px;
            height: 0px;
            border-left: 0px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 10px solid black;
        }