<html>
<body>
<style type="text/css">
span {
height: 40px;
width: 40px;
display: block;
position: relative;
}
.demoSpan1 {
width: 22px;
}
.demoSpan1:before {
content: '';
height: 12px;
width: 12px;
border: 5px solid pink;;
display: block;
position: absolute;
top: 2px;
left: 0px;
z-index: 1;
background: #fff;
line-height: 26px;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
color: #fff;
text-align: center;
}
.demoSpan1:after {
content: '';
height: 0px;
width: 0px;
display: block;
position: absolute;
bottom: 2px;
left: 1px;
border: 10px transparent solid;
border-top-color: pink;
border-width: 20px 10px 0px 10px;
}
</style>
<span class="demoSpan1">
</span>
</body>
</html>
css实现坐标点位效果
最新推荐文章于 2024-04-04 23:29:42 发布