css 划对号,css3画个圆圈里的对号

效果如图

image.png

基本思路

1先画一个圆

2画两个位于圆中间的小矩形

3旋转矩形，一个左旋45度，一个右旋45度

4利用absolute进行定位。

.demo2 {

width:40px;

height:40px;

border-radius:40px ;

background:black;

display:block;

position: relative;

}

.demo2:before, .demo2::after {

content:"";

height:28px;

width:6px;

border-radius: 10px;

display:block;

background:white;

position: absolute;

top:6px;/*40-6=34*/

left:20px;/*make the two rects in the middle of the cycle */

transform:rotate(45deg);

-ms-transform:rotate(45deg);

}

.demo2::before {

height:15px;

transform: rotate(-45deg);

-ms-transform:rotate(-45deg);

position: absolute;

top:18px;/*40-18=12 */

left:8px;

}

总结