css边框三角形

最新推荐文章于 2023-04-11 10:00:22 发布

伞兵不吃巧克力

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量125

点赞数

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

本文链接：https://blog.csdn.net/motor_tang/article/details/114693837

版权

css 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

css边框三角形

// html
<div class="content">
    <div class="top"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    <div class="left"></div>
</div>

// css
.content{
        padding: 30*@px;
        box-sizing: border-box;

        .top{
            width: 0;
            height: 0;
            border-top: none;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #ff4019;
            border-left: 10px solid transparent;
        }

        .right{
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-right: none;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #ff4019;;
        }
        .bottom{
            width: 0;
            height: 0;
            border-top: 10px solid #ff4019;
            border-right: 10px solid transparent;
            border-bottom: none;
            border-left: 10px solid transparent;
        }
        .left{
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-right: 10px solid #ff4019;
            border-bottom: 10px solid transparent;
            border-left: none;
        }
    }

结果如下图: