腾讯面试题：用一个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;
            }

效果图

效果图

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