纯CSS实现箭头，圆点，三角形

最新推荐文章于 2024-06-08 13:31:15 发布

不净之心

最新推荐文章于 2024-06-08 13:31:15 发布

阅读量396

点赞数

分类专栏：前台&美工

本文链接：https://blog.csdn.net/pyzheng/article/details/84773885

版权

前台&美工专栏收录该内容

118 篇文章 1 订阅

订阅专栏

[url]http://my.oschina.net/u/2362038/blog/649376[/url]
箭头：
.goback {
position: absolute;
top: 18px;
left: 18px;
border: 10px solid transparent;
border-right: 10px solid #ccc;
}

.goback:hover {
border-right: 10px solid #808080;
}

.goback:after {
content: '';
position: absolute;
top: -10px;
left: -7px;
border: 10px solid transparent;
border-right: 10px solid #fff;
}
<div class="goback"></div>

圆点：
.circle {
position: absolute;
margin: 52px 45px;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
border: 1px solid #2090ff;
}

.circle:after {
content: '';
margin: 3px;
display: table;
width: 6px;
height: 6px;
background: #2090ff;
border-radius: 50%;
}
<div class="circle"></div>

三角形：
.triangle {
position: absolute;
top: 16px;
right: 18px;
border: 6px solid transparent;
border-top: 6px solid #123456;
}
<div class="triangle"></div>