如何仅使用 CSS 创建带箭头的细长六边形按钮？

具有单个元素的细长六边形按钮

挑战：

我们的目标是创建一个细长的六边形 -形状按钮仅使用 CSS，而不依赖其他元素。该按钮应具有扩展的丝带状边框，两侧都有指向外的箭头。

解决方案 1（在问题中提供）：

此方法使用两个伪-elements (::before 和 ::after) 创建功能区边框。然而，它会导致箭头不对称和居中不当。

改进的解决方案：

为了完善设计并解决限制，我们提出了一种替代解决方案，该解决方案采用不同的CSS策略：

概念：

这种方法需要：

1. 利用 ::before 和 ::after 伪元素构成一半主按钮元素的大小。
2. 定位这些伪元素以形成六边形。
3. 使用旋转 X 和透视来实现所需的倾斜

实现：

/* General Button Style */

.button {
  /* Properties as before... */
}

/* Pseudo-elements */

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

.button:before {
  /* Top half; adjust rotation here... */
}

.button:after {
  /* Bottom half; adjust rotation here... */
  top: 40px;
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  /* Properties as before... */
}

/* Etc., omitted for brevity */

解释：

• 伪元素是绝对放置在主按钮元素内。
• 顶部伪元素顺时针旋转，而底部逆时针旋转，产生倾斜的外观。
• 边框应用于伪元素，创建六边形形状。
• 这种设计允许通过调整伪元素的宽度和高度及其变换属性来完全自定义按钮的形状和尺寸。

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