今天实现一个 用一个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>
效果图：