How to use CSS to realize a duck head
This article will explain in detail how to use CSS to achieve a duck head. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
Code interpretation
Define the dom. The container contains four elements:
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background-color:papayawhip
}
Define the container size:
.duck {
Width:10em
Height:10em
}
Use grid to layout the 4 squares according to 2x2:
.duck {
Display:grid
Grid-template-columns:repeat (2Jing 1fr)
}
.duckspan {
Background-color:seagreen
}
Rotate the container 45 degrees:
.duck {
Transform:rotate (- 45deg)
}
Set the fillet of each square and combine it into the abstract shape of a duck:
.duckspan:nth-child (1) {
Border-top-left-radius:100%
}
.duckspan:nth-child (2) {
Border-top-right-radius:100%
}
.duckspan:nth-child (3) {
Border-bottom-right-radius:100%
}
.duckspan:nth-child (4) {
Border-bottom-left-radius:100%
}
Set a different color for the last square to make it look like a duck's beak:
.duckspan:nth-child (4) {
Background-color:coral
}
Draw a dot with a radial gradient in the second square to represent the duck's eyes:
.duckspan:nth-child (2) {
Background-image:radial-gradient (black0.5em,transparent0.5em)
}
The great task has been completed!
This is the end of the article on "how to use CSS to achieve a duck's head". 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, please share it for more people to see.
