https://github.com/comehope/front-end-daily-challenges

 

　　代码解读

 

　　定义dom，只有1个元素：

 

　　<divclass="mcdonalds"></div>

 

　　居中显示：

 

　　body{

 

　　margin:0;

 

　　height:100vh;

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:center;

 

　　background:radial-gradient(circleatcenter,darkred,black);

 

　　}

 

　　定义容器尺寸：

 

　　.mcdonalds{

 

　　width:36em;

 

　　height:30em;

 

　　font-size:5px;

 

　　color:red;

 

　　background-color:currentColor;

 

　　}

 

　　用伪元素画出字母m的左半边n的形状：

 

　　

 

　　.mcdonalds{

 

　　position:relative;

 

　　overflow:hidden;

 

　　}

 

　　.mcdonalds::before{

 

　　content:'';

 

　　position:absolute;

 

　　width:20em;

 

　　height:calc(30em*2);

 

　　box-sizing:border-box;

 

　　border:solidyellow;

 

　　border-width:2.2em4.4em;

 

　　border-radius:50%;

 

　　}

 

　　把左半边复制一份，即是右半边n的形状，和左边一起组成了字母m：

 

　　.mcdonalds::before{

 

　　filter:drop-shadow(16em00yellow);

 

　　}

 

　　用伪元素遮住字母m中间竖线底部一点点，使两边的竖显得长一些：

 

　　.mcdonalds::after{

 

　　content:'';

 

　　position:absolute;

 

　　width:6em;

 

　　height:1.5em;

 

　　background-color:currentColor;

 

　　left:calc((36em-6em)/2);

 

　　bottom:0;

 

　　}

 

　　最后，将红色背景向外延伸一些：

 

　　.mcdonalds{

 

　　box-shadow:00010em;

 

　　}







本文转载自中文网