用一个div画出关闭图标

2019年9月7日 117次阅读 来源: koich51

今天实现一个 用一个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>

效果图：
《用一个div画出关闭图标》

    原文作者：koich51
    原文地址: https://segmentfault.com/a/1190000008955548
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞