我們可以用 CSS 來畫一個簡單的小人,只需要用一些基礎的 CSS 屬性和 HTML 元素就可以實現。
/* 基礎樣式 */ .person { position: relative; width: 100px; height: 200px; background-color: #fff; border-radius: 50px 50px 0 0; } /* 頭部 */ .head { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; background-color: #000; border-radius: 50%; } /* 眼睛 */ .eye { position: absolute; top: 15px; left: 17px; width: 16px; height: 16px; background-color: #fff; border-radius: 50%; } /* 眼珠 */ .eye::before { position: absolute; top: 4px; left: 4px; content: ""; width: 8px; height: 8px; background-color: #000; border-radius: 50%; } /* 嘴巴 */ .mouth { position: absolute; top: 27px; left: 12px; width: 26px; height: 6px; background-color: #000; border-radius: 10px; } /* 身體 */ .body { position: absolute; top: 90px; left: 0; width: 100px; height: 100px; background-color: #fff; } /* 手臂 */ .arm { position: absolute; top: 100px; width: 20px; height: 80px; background-color: #000; border-radius: 10px; } .left-arm { left: 0; transform: rotate(15deg); } .right-arm { right: 0; transform: rotate(-15deg); } /* 腿 */ .leg { position: absolute; bottom: 0; width: 20px; height: 80px; background-color: #000; border-radius: 10px; } .left-leg { left: 30px; transform: rotate(-15deg); } .right-leg { right: 30px; transform: rotate(15deg); }
用以上代碼就可以畫出一個簡單的小人了,當然如果想要更加真實的效果還需要更多細節的處理。