Method for implementing a duck head using CSS

Xiaobian to share the method of using CSS to realize a duck head, I believe that most people are not very understanding, so share this article to everyone, I hope everyone has a big harvest after reading this article. Let us let us know together!


Source code download

Code Interpretation

Defines the DOM, 4 elements in the container:


body {margin: 0; Height: 100 VH; Display: Flex; align-item; center; background-color: paner; background-color: papayawhip;}
   Define container size: 

.duck {width: 10em; Height: 10em;}
 4 square blocks by Grid 2 * 2 layout:   
.duck {Display: Grid; Grid-Template-Column: Repeat (2, 1fr);}. duck span {background-color: SE

Turn the container 45 degrees:
   .duck {transform: rotate (-45deg);} 

Sets each square round corner, combined into a duck abstract shape:
  .duck span: nth-child (1) {border-top- Left-radius: 100%;}. duck span: nth-child (2) {border-top-right-radius: 100%;}. duck span: nth-child (3) {border-bottom-right-radius: 100%;}. Duck span: nth-child (4) {border-bottom-left-radius: 100%;}  

has a difference in color, making It looks like a duck mouth:

  .duck span: nth-child (4) {background-color: coal;}  

The second part is used to draw a row, representing the eyes of the duck:

  .duck span: nth-child (2) {Background-Image: radial-gradient Black 0.5em, Transparent 0.5EM);}  
The above is all the contents of the method of implementing a duck head using CSS, thank you for reading! I believe everyone has a certain understanding, I hope to share the content, such asIf you want to learn more knowledge, please pay attention to Tumi Yun Industry Information Channel!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment