我該如何製作一個純 CSS 南瓜。

萬聖節快樂，我最近做了這個 100% CSS 南瓜，以融入幽靈般的季節精神，有些人想知道它是如何製作的。

看筆
100% CSS 南瓜，作者：micfun123 (@micfun123)
在 CodePen 上。

那麼讓我解釋一下它是如何運作的。對於那些只想要程式碼而不想查看流程的人，這裡是 CodePen 。

我以前從未做過這樣的事情，所以我的第一個目標是 3 個橙色橢圓形。

所以我從 HTML 開始。

這會並排輸出 3 個完美的橙色橢圓形。 這是怎麼回事？ 首先，我們使用 body 標籤將南瓜 div 置於頁面中央。我們用前 3 行來做到這一點。接下來，我們使用高度：100vh；告訴程式碼 body 標籤佔據了 100% 的螢幕。如果沒有這個，正文標籤將僅與內容一樣大，這意味著橢圓形將在頁面頂部居中。 這就是它的樣子。

接下來，我們希望圓圈重疊，這可以透過給左右橢圓形負邊距來相當容易地完成。

所以在這裡我們將右側橢圓形向左移動 45 像素，左側橢圓形向右移動 45 像素。 （我不會添加這個階段的照片，因為我還沒有辦法處理儲存照片）

現在是更困難的部分（有些，好吧，使用了很多谷歌）

因此寬度、高度、邊框半徑和背景顏色都非常不言自明。 所以我要跳過它。 從位置開始：絕對； 其作用是從網站流程中刪除 div。相反，它基於最近的錨點。 位置：絕對； 可放置在任何元素上。接下來，為了使莖水平居中，我們使用left: 50% 和transform: translateX(-50%);當您考慮它時，這是有道理的，但您必須考慮從左開始：50% 將莖的左邊緣置於南瓜div 內的中心。我希望莖的中心位於南瓜的中心。變換：translateX(-50%)；將閥桿向左側移動閥桿尺寸的一半。頂部：-47px；幾乎符合您的預期。它將頂部邊緣向上移動 47 像素。 z-index是我最近發現的一個東西，基本上就是元素的高度。我希望 z 索引位於南瓜後面，所以我給它一個 z 索引：-1，而南瓜的預設索引為 0。這就是它的樣子。

最後是眼睛、嘴巴和背景。先從眼睛開始吧

所以這看起來比 border-width: 0 50px 41px 30px 更可怕；所以這裡我們設定正方形每條邊的長度。它從頂部開始並按順時針方向運行。所以正方形的頂部長度為 0。這是因為三角形有 3 條邊，這個技巧讓我們可以刪除形成三角形的一邊。那麼右側長50px，底部長50px，左側長30px。對於右眼，我們翻轉左右值，使其指向另一個方向。 邊框顏色：透明 透明 #000000 透明； 所以你可能想知道為什麼有這麼多透明的。好吧，你看到這裡實際上有 3 個三角形（其中一個由於寬度為 0 而不存在）我們只想為底部三角形著色，因此我們將其他 3 個三角形設置為透明。 邊框樣式：實心；我們希望三角形有實心填充，所以我們必須將樣式設為實心。我們並沒有真正填充三角形，而是有一個很大的邊框，所以看起來我們已經填充了。經歷了這一切之後，我們現在有了眼睛。

最後一步是微笑。

左上邊框半徑：110px；右上邊框半徑：110px；定義頂角的圓度。這是形成半圓的部分，但這也會將曲線放在頂部。為了解決這個問題，我添加了變換：旋轉（190deg）將其旋轉為微笑並使用 left: 25%;使其稍微偏離中心。 這是最終結果。

看筆
100% CSS 南瓜，作者：micfun123 (@micfun123)
在 CodePen 上。

我承認這不是最漂亮的解決方案或最有效的解決方案，但是，這是我第一次嘗試在 CSS 中繪製一些東西，我對此感到非常滿意。一如既往，請隨時在 Discord 或 reddit 上給我留下反饋。

以上是我該如何製作一個純 CSS 南瓜。的詳細內容。更多資訊請關注PHP中文網其他相關文章！