使用CSS（單元素解決方案）創(chuàng)建拉長的六邊形按鈕

在按鈕設計領域，拉長的六邊形形狀經(jīng)常引人注目。雖然通常使用多個元素來實現(xiàn)，但是否可以僅使用一個元素來創(chuàng)建這樣的按鈕？

答案是肯定的！這是實現(xiàn)這種獨特設計的創(chuàng)造性解決方案：

構建基本形狀

1. 利用兩個具有大小的偽元素（:before 和 :after）大約主按鈕元素的一半。
2. 為偽元素設置不同的高度以創(chuàng)建傾斜

實現(xiàn)傾斜效果

1. 使用透視和rotateX 變換:before 元素以創(chuàng)建傾斜效果。稍微向前旋轉。
2. 對 :after 元素應用類似的變換，但稍微向后旋轉。

定位元素

1. 將 :before 和 :after 元素彼此相鄰放置，創(chuàng)建一個連續(xù)的形狀。
2. 使用絕對定位來調(diào)整其對齊方式。

用邊框和顏色強調(diào)

1. 為兩個偽元素添加邊框- 定義形狀的元素。
2. 應用適當?shù)念伾赃M一步增強外觀。

交互效果（可選）

1. 使用懸停過渡設置主按鈕和偽元素的樣式以添加交互行為。
2. 自定義顏色和效果

代碼示例

/* 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:before,
.button.border:after {
  border: 4px solid #e04e5e;
}

.button.border:before {
  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}

.button.border:after {
  border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}

  
/* Button hover styles */

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

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

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

通過利用這種巧妙的方法，您只需使用一個元素即可輕松創(chuàng)建迷人的細長六邊形按鈕。這種技術為任何用戶界面增添了優(yōu)雅和獨特的感覺。

以上是單個 CSS 元素可以創(chuàng)建拉長的六邊形按鈕嗎？的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！