使用單個元素創(chuàng)建細(xì)長的六邊形按鈕

在 Web 開發(fā)中，創(chuàng)建自定義按鈕形狀可能是一個挑戰(zhàn)，尤其是僅使用 CSS 時并避免額外的 HTML 元素。當(dāng)嘗試制作兩邊都有細(xì)長箭頭的六邊形按鈕時，會出現(xiàn)一個常見的困境。

現(xiàn)有方法

一種標(biāo)準(zhǔn)方法涉及同時使用 :before 和 :after 偽值- 在一側(cè)生成單個箭頭的元素。但是，這需要在鏈接中包含另一個 span 元素以在另一側(cè)創(chuàng)建箭頭，從而使解決方案變得復(fù)雜。

另一種方法是使用 :after 和 :before 創(chuàng)建功能區(qū)起始邊框具有稍微傾斜角度的偽元素。然而，這種方法經(jīng)常會導(dǎo)致錯位和箭頭長度不均勻。

改進(jìn)的單元素解決方案

這里有一種改進(jìn)的方法，僅使用一個元素來實(shí)現(xiàn)所需的六邊形按鈕形狀：

代碼：

HTML：

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

CSS：

.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;
}

解釋：

• 兩個使用偽元素（:before 和 :after），每個元素的高度為 34px（包括邊框），寬度為 300px（按鈕的寬度）。
• 形狀的上半部分是通過提升創(chuàng)建的:before 元素稍微使用rotateX(3deg)。
• 下半部分由 :after 元素形成，它通過以下方式提升rotateX(-3deg) 并偏移 40px 以與按鈕的頂部邊緣對齊。
• 兩個偽元素的左偏移量為 0px，z 索引為 -1，以確保它們重疊并創(chuàng)建六邊形形狀。
• 邊框樣式應(yīng)用于按鈕元素以創(chuàng)建細(xì)邊框（使用 4px 實(shí)線#e04e5e）并制作邊框偽元素不可見（底部和頂部邊框均不可見）。
• 懸停時，偽元素的背景更改為 #e04e5e，按鈕的文本顏色變?yōu)榘咨?/li>

該技術(shù)僅使用 CSS 和單個 HTML 元素有效地創(chuàng)建了一個細(xì)長的六邊形按鈕，為設(shè)計(jì)挑戰(zhàn)提供了干凈簡潔的解決方案。

以上是如何僅使用一個 HTML 元素和 CSS 創(chuàng)建一個細(xì)長的六邊形按鈕？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！