[CSS]使用border绘制图形

最新推荐文章于 2024-07-13 11:50:40 发布

贺总的好兄弟

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量870

点赞数

分类专栏：前端文章标签： CSS border 图形设计三角形梯形

本文链接：https://blog.csdn.net/CosecantY/article/details/121872952

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通常咱们写css的时候都是用border来写边框，但是今天发现可以用border来画一些特殊图形，比如三角形、梯形等一些特殊的图形。

下面来看例子

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>

.div1 {
            width: 0;
            height: 0;
            box-sizing: border-box;
            border: solid #d2691e;
            border-color: transparent transparent red transparent;
            border-width: 0px 100px 150px 100px;
        }
        .div2 {
            width: 0;
            height: 0;
            box-sizing: border-box;
            border: solid #d2691e;
            border-color: transparent transparent transparent red;
            border-width: 100px 100px 150px 300px;
        }
        .div3 {
            width: 0;
            height: 0;
            box-sizing: border-box;
            border: solid #d2691e;
            border-color: transparent transparent red transparent;
            border-width: 50px 100px 150px 300px;
        }
        .div4 {
            width: 0;
            height: 0;
            box-sizing: border-box;
            border: solid #d2691e;
            border-color: transparent transparent red red;
            border-width: 50px 100px 150px 300px;
        }

用border做边框，可以看做是四个梯形边框拼接而成的边框，如果边框的厚度足够大，就会形成四个三角形，我们可以利用这个特性来大做文章。

可以看到上面CSS里有border-color，这里可以规定我们把哪一个三角形染色（上右下左的顺序），borde-width可以看做是四个三角形的顶点与各个边框的距离（上右下左的顺序），如果是0就是定点贴在了这个边框上。

然后，就可以用切、补、组合等方式用border来创造图形了！

贺总的好兄弟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
[CSS]使用border绘制图形

通常咱们写css的时候都是用border来写边框，但是今天发现可以用border来画一些特殊图形，比如三角形、梯形等一些特殊的图形。下面来看例子<body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div>
复制链接

扫一扫