CSS 畫眼眉

.eyebrows {
position: relative;
width: 40px;
height: 10px;
background-color: #000;
border-radius: 20px 20px 0 0;
transform: rotate(-25deg);
top: -20px;
left: 60px;
}
.eyebrows::before {
content: "";
position: absolute;
width: 30px;
height: 10px;
background-color: #000;
border-radius: 20px;
transform: rotate(45deg);
top: -10px;
left: -15px;
}

怎么畫

首先，我們需要一個父元素來包含眉毛，這樣就可以旋轉它們而不會影響其他元素。對于眉毛，我們使用一個寬度為 40 像素、高度為 10 像素的矩形來創建它們。我們設置它們的背景顏色為黑色，并向上面兩個角添加圓角來模擬眉毛的自然輪廓。最后，使用 transform 屬性將眉毛旋轉 -25 度，并將它們向上移動 20 像素、向左移動 60 像素以使其與眼睛對齊。

接下來，我們使用偽元素 before 來添加眉毛的另一半。我們設置一個寬度為 30 像素、高度為 10 像素的矩形，并將其旋轉 45 度。由于我們的眉毛已經被旋轉了 -25 度，我們需要將它們的偽元素定位在左上角，以對齊眉毛的自然輪廓。

希望這個簡單的教程能幫助你學習如何使用 CSS 創建自己的眼眉。