This article brings you the content is about how to use CSS to implement a duck head (with code), there is a certain reference value, the need for friends can refer to, I hope to help you.
Effect Preview
Source code Download
Https://github.com/comehope/front-end-daily-challenges
Code interpretation
To define the DOM, the container contains 4 elements:
<figure class= "Duck" > <span></span> <span></span> <span></ Span> <span></span></figure>
Center display:
body { margin:0; HEIGHT:100VH; Display:flex; Align-items:center; Justify-content:center; background-color:papayawhip; }
Define Container Dimensions:
. duck { width:10em; Height:10em;}
Use the grid to press the 2*2 layout of 4 blocks:
. duck { display:grid; Grid-template-columns:repeat (2, 1FR);}. Duck span { background-color:seagreen;}
Rotate the container 45 degrees:
. Duck { transform:rotate ( -45deg);}
Set the rounded corners of each square into a duck's 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%;}
Set a different color for the last block to make it look like a duck's mouth:
. Duck Span:nth-child (4) { background-color:coral;}
In the 2nd block, draw a dot with a radial gradient that represents the eye of the duck:
. Duck Span:nth-child (2) { background-image:radial-gradient (black 0.5em, Transparent 0.5em);}
Done!