纯CSS画三角形原理

最新推荐文章于 2021-04-22 21:50:00 发布

Sink_x0

最新推荐文章于 2021-04-22 21:50:00 发布

阅读量296

点赞数 1

文章标签： css css3

本文链接：https://blog.csdn.net/qq_41622983/article/details/105347180

版权

前言：面试题里CSS画三角形的出镜率很高，其实答案一搜就有，但在没弄懂原理之前看起来还是不太直观，所以就自己来实践一下。

① 写一个div，设置四周不同颜色边框

<style>
    .div{
        border-top: 20px solid #809060;
        border-right: 20px solid #95c23b;
        border-bottom: 20px solid #5f8a09;
        border-left: 20px solid #384e0c;
    }
</style>
<body>
    <div class="div">CSS三角形原理</div>
</body>

出现如下结果：
在这里插入图片描述
② 把div宽高设置为零

<style>
    .div{
        border-top: 20px solid #809060;
        border-right: 20px solid #95c23b;
        border-bottom: 20px solid #5f8a09;
        border-left: 20px solid #384e0c;
        width: 0;
        height: 0;
    }
</style>
<body>
    <div class="div"></div>
</body>

出现如下结果：
在这里插入图片描述

③ 把另外三边边框设置为透明

<style>
    .div{
        border-top: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 20px solid #384e0c;
        width: 0;
        height: 0;
    }
</style>
<body>
    <div class="div"></div>
</body>

出现如下结果：
在这里插入图片描述

Sink_x0

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯CSS画三角形原理

前言：面试题里CSS画三角形的出镜率很高，其实答案一搜就有，但在没弄懂原理之前看起来还是不太直观，所以就自己来实践一下。① 写一个div，设置四周不同颜色边框<style> .div{ border-top: 20px solid #809060; border-right: 20px solid #95c23b; borde...
复制链接

扫一扫

纯CSS画 三角形 原理

纯CSS画三角形原理