html用div做十字架,腾讯面试题：用一个div创建一个十字架

去腾讯面试了一趟，做了一套css的笔试题，其中有一道印象深刻：用一个div做出红色十字架。

思路

遇到这种题保持冷静不要慌，想想什么能用上。

一开始我想的是把一个正方形的四个角挖掉(用四个白色正方形遮盖住四个角)，后来发现还是不太好实现，接着想想其实可以用after和before伪类。

这道题的难点在于捋清思路，要想到利用伪类为自己创造条件。

原理

原理是利用伪类before和after创造出两条直线，利用绝对定位居中交叉在一起，从而实现十字架的效果。

代码

div{

height: 50px;

width: 50px;

position: relative;

margin: 0;

padding: 0;

box-sizing: border-box;

}

div:after{

content: "";

display: block;

position: absolute;

width: 100%;

height: 20px;

background: #000;

top: 15px;

right: 0px;

}

div:before{

content: "";

display: block;

position: absolute;

width: 20px;

height: 100%;

background: #000;

top: 0px;

left: 15px;

}

效果图

效果图

把颜色换成红色即是红十字架了。