如何僅使用一個 HTML 元素和 CSS 來建立一個細長的六角形按鈕？

使用單一元素建立細長的六邊形按鈕

在Web 開發中，建立自訂按鈕形狀可能是一個挑戰，尤其是僅使用CSS 時並避免額外的HTML 元素。當嘗試製作兩邊都有細長箭頭的六邊形按鈕時，會出現一個常見的兩難。

現有方法

一種標準方法涉及同時使用 :before 和 :after 偽值- 在一側產生單一箭頭的元素。但是，這需要在連結中包含另一個 span 元素以在另一側建立箭頭，從而使解決方案變得複雜。

另一種方法是使用 :after 和 :before 建立功能區起始邊框具有稍微傾斜角度的偽元素。然而，這種方法經常會導致錯位和箭頭長度不均勻。

改進的單元素解決方案

這裡有一種改進的方法，僅使用一個元素來實現所需的六邊形按鈕形狀：

代碼：

HTML：

CSS：

CSS：

• 兩個使用偽元素（:before 和 :after），每個元素的高度為 34px（包括邊框），寬度為 300px（按鈕的寬度）。
• 形狀的上半部是透過提升創建的:before 元素稍微使用rotateX(3deg)。
• 下半部由 :after 元素形成，它透過以下方式提升rotateX(-3deg) 並偏移 40px 以與按鈕的頂部邊緣對齊。
• 兩個偽元素的左偏移量為 0px，z 索引為 -1，以確保它們重疊並建立六邊形形狀。

將邊框樣式套用至按鈕元素以建立細邊框（使用 4px 實線#e04e5e）並製作邊框偽元素不可見（底部和頂部邊框均不可見）。

懸停時，偽元素的背景改為 #e04e5e，按鈕的文字顏色變為白色。 該技術僅使用 CSS 和單一 HTML 元素有效地創建了一個細長的六邊形按鈕，為設計挑戰提供了乾淨簡潔的解決方案。

以上是如何僅使用一個 HTML 元素和 CSS 來建立一個細長的六角形按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！