用一个div画出关闭图标

最新推荐文章于 2021-06-15 14:16:31 发布

weixin_33901843

最新推荐文章于 2021-06-15 14:16:31 发布

阅读量305

点赞数

原文链接：https://segmentfault.com/a/1190000008955548

版权

今天实现一个用一个div来实现关闭按钮图标，其中主要用到的技巧：css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中，此次是用了flex弹性布局。
css样式如下：
<style>

html,body{
width:100%;
height:100%;
overflow: hidden;
display: flex;
justify-content:center;
align-items:center;
}
.closed{
width:60px;
height:60px;
border:1px solid green;
border-radius: 50%;
position: relative;
}
.closed:before{
content: ”;
display: block;
position: absolute;
width:90%;
height:1px;
background: #666;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
top:30px;
left:5%;
}
.closed:after{
content: ”;
display: block;
position: absolute;
width:90%;
height:1px;
background: #666;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
top:30px;
left:5%;
}

</style>

<body>
<!– by-koich51 主要用到利用css3的伪元素 :before :after
和css3的转换角度 transform: rotate(90deg);–>
<div class=”closed”></div>
</body>

效果图：
图片描述

weixin_33901843

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用一个div画出关闭图标

今天实现一个用一个div来实现关闭按钮图标，其中主要用到的技巧：css3伪元素:before,:after,css3的transform:rotate(),同时让该图标居中，此次是用了flex弹性布局。css样式如下：<style>html,body{width:100%;height:100%;overflow: ...
复制链接

扫一扫

用一个div画出关闭图标

“相关推荐”对你有帮助么？