CSS-使用css做一个已收款的旋转图标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
outline: 0;
}
.index_balance {
background: #f1ffea;
}
.index_balance {
position: absolute;
right: 15px;
top: 15px;
width: 110px;
height: 110px;
border: 4px solid;
border-radius: 100%;
text-align: center;
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
font-weight: 700;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.color-green {
color: #52c41a;
}
.index_balance:before {
content: attr(content);
font-size: 24px;
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 1px dashed;
border-radius: 100%;
line-height: 92px;
background: #fff;
}
</style>
</head>
<body>
<div content="已结清" class="color-green index_balance"></div>
</body>
</html>
正文到此结束
热门推荐
相关文章
近期评论
-
来自： 运维-docker专题-创建镜像-操作容器-制作jdk17的docker镜像等
-
来自： 留言板
-
来自： 留言板
-
来自： js-处理网页图片宽度自适应屏幕宽度
-
来自： 留言板
