去腾讯面试了一趟，做了一套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;
}
效果图
效果图
把颜色换成红色即是红十字架了。
