如何僅使用一個 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，以確保它們重疊並建立六邊形形狀。

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