【css】实现三角

最新推荐文章于 2023-09-05 16:23:33 发布

richest_qi

最新推荐文章于 2023-09-05 16:23:33 发布

阅读量173

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/107768854

版权

69 篇文章 4 订阅

订阅专栏

实现原理：border

<body>
    <div class="arrow"></div>
</body>

.arrow{
    width:0;height:0;
    border:50px solid;
    border-color:red green blue yellow;
}

在这里插入图片描述

.arrow{
    width:0;height:0;
    border:50px solid transparent;
    border-bottom-color:#000;
}

在这里插入图片描述

.arrow{
    width:0;height:0;
    border:50px solid transparent;
    border-top-color:#000;
}

在这里插入图片描述

.arrow{
    width:0;height:0;
    border:50px solid transparent;
    border-right-color:#000;
}

在这里插入图片描述

.arrow{
    width:0;height:0;
    border:50px solid transparent;
    border-left-color:#000;
}

在这里插入图片描述

.arrow{
    width:0;height:0;
    border:50px solid transparent;
    border-top-color:#000;
    border-right-color:#000;
}

在这里插入图片描述

.arrow{
    width:0;height:0;
    border:50px solid transparent;
    border-right-color:#000;
    border-bottom-color:#000;
}

在这里插入图片描述

.arrow{
    width:0;height:0;
    border:50px solid transparent;
    border-bottom-color:#000;
    border-left-color:#000;
}

在这里插入图片描述

    width:0;height:0;
    border:50px solid transparent;
    border-left-color:#000;
    border-top-color:#000;

在这里插入图片描述

关注

专栏目录