How to use pure CSS to realize single element McDonald's Logo
This article is about how to use pure CSS to implement single-element McDonald's Logo. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Code interpretation
Define dom with only 1 element:
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background:radial-gradient (circleatcenter,darkred,black)
}
Define the container size:
.mcdonalds {
Width:36em
Height:30em
Font-size:5px
Color:red
Background-color:currentColor
}
Draw the shape of the left half of the letter m n with pseudo elements:
.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%
}
Make a copy of the left side, which is the shape of the right side n, together with the left side to form the letter m:
.mcdonalds:: before {
Filter:drop-shadow (16em00yellow)
}
Cover the bottom of the middle vertical line of the letter m a little bit with pseudo elements to make the vertical lines on both sides look longer:
.mcdonalds:: after {
Content:''
Position:absolute
Width:6em
Height:1.5em
Background-color:currentColor
Left:calc ((36em-6em) / 2)
Bottom:0
}
Finally, extend the red background a little bit:
.mcdonalds {
Box-shadow:00010em
}
Thank you for reading! This is the end of this article on "how to use pure CSS to achieve single-element McDonald's Logo". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!
