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

創建一個只有一個元素的細長六邊形按鈕

問題：

可以您僅使用HTML 和CSS 建立一個六邊形按鈕，而無需求助於多個元素？

可能的解決方案：

以下是僅使用單一元素實現此效果的替代方法：

1. 利用偽元素： 使用:before 和:after 模仿一半的偽元素主按鈕的大小，包括邊框。
2. 定義形狀的一半： :before 元素形成形狀的上半部分，而 :after 形成下半部分。每個都有特定的高度和邊框排列，類似於六邊形。
3. 傾斜和位置：帶有透視的 RotateX用於傾斜偽元素並將它們適當定位以形成整體按鈕形狀.

範例程式碼：

/* General Button Style */
.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 300px;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  transform: perspective(15px) rotateX(3deg);
}

.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}

/* Button Border Style */
.button.border {
  border: 4px solid #e04e5e;
}

.button.border:hover:before,
.button.border:hover:after {
  background: #e04e5e;
}

.button.border:hover {
  color: #fff;
}

<a href="#" class="button border">Click me!</a>

注意：要使用瀏覽器前綴，請包含modernizr或前綴。

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