如何仅使用一个 HTML 元素和 CSS 创建一个细长的六边形按钮？

使用单个元素创建细长的六边形按钮

在 Web 开发中，创建自定义按钮形状可能是一个挑战，尤其是仅使用 CSS 时并避免额外的 HTML 元素。当尝试制作两边都有细长箭头的六边形按钮时，会出现一个常见的困境。

现有方法

一种标准方法涉及同时使用 :before 和 :after 伪值- 在一侧生成单个箭头的元素。但是，这需要在链接中包含另一个 span 元素以在另一侧创建箭头，从而使解决方案变得复杂。

另一种方法是使用 :after 和 :before 创建功能区起始边框具有稍微倾斜角度的伪元素。然而，这种方法经常会导致错位和箭头长度不均匀。

改进的单元素解决方案

这里有一种改进的方法，仅使用一个元素来实现所需的六边形按钮形状：

代码：

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（按钮的宽度）。
• 形状的上半部分是通过提升创建的:before 元素稍微使用rotateX(3deg)。
• 下半部分由 :after 元素形成，它通过以下方式提升rotateX(-3deg) 并偏移 40px 以与按钮的顶部边缘对齐。
• 两个伪元素的左偏移量为 0px，z 索引为 -1，以确保它们重叠并创建六边形形状。
• 边框样式应用于按钮元素以创建细边框（使用 4px 实线#e04e5e）并制作边框伪元素不可见（底部和顶部边框均不可见）。
• 悬停时，伪元素的背景更改为 #e04e5e，按钮的文本颜色变为白色。

该技术仅使用 CSS 和单个 HTML 元素有效地创建了一个细长的六边形按钮，为设计挑战提供了干净简洁的解决方案。

以上是如何仅使用一个 HTML 元素和 CSS 创建一个细长的六边形按钮？的详细内容。更多信息请关注PHP中文网其他相关文章！