html怎么把div弄成圆圈,一个div实现一个圆的关闭按钮

一个div实现一个圆的关闭按钮

小僧去面试的时候被问到的一个问题，主要就是考察css3的功底，所谓难者不会，会者不难，我也来试试。

原理如下

利用css3的伪元素 :before :after

利用css3的转换角度 transform: rotate(90deg);

代码如下：

html代码

css代码

.close{

width: 30px;

height: 30px;

background: #fff;

position: relative;

border-radius: 50%;

margin: 20px auto;

}

.close:before{

content: '';

display: block;

width: 100%;

height: 1px;

background: red;

-ms-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-webkit-transform:rotate(45deg);

-o-transform:rotate(45deg);

position: absolute;

left: 0;

top: 15px;

}

.close:after{

content: '';

display: block;

width: 100%;

height: 1px;

background: red;

-ms-transform:rotate(135deg);

-moz-transform:rotate(135deg);

-webkit-transform:rotate(135deg);

-o-transform:rotate(135deg);

position: absolute;

left: 0;

top: 15px;

}

实现的图片是这样的