css制作三角形和圆|实心+空心

最新推荐文章于 2022-07-21 16:50:35 发布

黑夜之星

最新推荐文章于 2022-07-21 16:50:35 发布

阅读量467

点赞数

分类专栏： UI效果文章标签： html

本文链接：https://blog.csdn.net/qq_25508039/article/details/111573594

版权

UI效果专栏收录该内容

4 篇文章 0 订阅

订阅专栏

左箭头

.triangle_left{
    position: relative;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-right: 25px solid #000;
    border-bottom: 25px solid transparent;
}
 .triangle_left:after{
    content: '';
    position: absolute;
    border-top: 25px solid transparent;
    border-right: 25px solid #fff;
    border-bottom: 25px solid transparent;
    left: 5px;
    top: -25px;
}

<div class="triangle_left" ></div>

右箭头

在这里插入图片描述

 .triangle_right{
    position: relative;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #000;
}
.triangle_right:after{
    content: '';
    position: absolute;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 25px solid #fff;
    left: -30px;
    top: -25px;
}