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

效果图

效果图

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

你可能感兴趣的:(腾讯面试题:用一个div创建一个十字架)