如何僅使用 CSS 建立帶箭頭的細長六邊形按鈕？

具有單一元素的細長六邊形按鈕

挑戰：

我們的目標是創建一個細長的六邊形-形狀按鈕僅使用CSS，而不依賴其他元素。此按鈕應具有擴展的絲帶狀邊框，兩側都有指向外的箭頭。

解決方案 1（在問題中提供）：

此方法使用兩個偽-elements (::before 和 ::after) 建立功能區邊框。然而，它會導致箭頭不對稱和居中不當。

改進的解決方案：

為了完善設計並解決限制，我們提出了一種替代解決方案，該解法採用不同的CSS策略：

概念：

這個方法需要：

1. 利用::before 和 ::after 偽元素構成一半主按鈕元素的大小。
2. 定位這些偽元素以形成六邊形。
3. 使用旋轉X 和透視來實現所需的傾斜

實現：

解釋：

• 偽元素是絕對放置在主按鈕元素內。
• 頂部偽元素順時針旋轉，而底部則逆時針旋轉，產生傾斜的外觀。
• 邊框套用於偽元素，建立六邊形形狀。
• 這種設計允許透過調整偽元素的寬度和高度及其變換屬性來完全自訂按鈕的形狀和尺寸。

以上是如何僅使用 CSS 建立帶箭頭的細長六邊形按鈕？的詳細內容。更多資訊請關注PHP中文網其他相關文章！