退出图标html css 实现,用一个div画出关闭图标

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

css样式如下：

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%;

}

和css3的转换角度 transform: rotate(90deg);–>

效果图：