如何使用CSS實現一隻鴨子頭（附代碼）

本篇文章給大家帶來的內容是關於如何使用CSS實現一隻鴨子頭（附代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

原始碼下載

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

代碼解讀

定義 dom，容器中包含 4 個元素：

<figure class="duck">    <span></span>    <span></span>    <span></span>    <span></span></figure>

置中顯示：

body {    margin: 0;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background-color: papayawhip;  }

定義容器尺寸：

.duck {    width: 10em;    height: 10em;}

用 grid 把 4 個方塊按 2*2 布局：

.duck {    display: grid;    grid-template-columns: repeat(2, 1fr);}.duck span {    background-color: seagreen;}

把容器旋轉 45 度：

.duck {    transform: rotate(-45deg);}

設定每個正方形的圓角，組合成一隻鴨子的抽象形狀：

.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%;}

為最後一個方塊設定有差異的顏色，使它看起來像鴨子嘴：

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

在第 2 個方塊用放射狀漸層畫出一個圓點，代表鴨子的眼睛：

.duck span:nth-child(2) {    background-image: radial-gradient(black 0.5em, transparent 0.5em);}

大功告成！