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

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

问题：

设计一个具有细长六边形形状的按钮，两端都有箭头，使用只有一个 HTML 元素和 CSS。

挑战：

同时使用 :before 和 :after 元素会在一侧创建两个箭头，因此需要一个附加元素。此外，对齐箭头和调整箭头大小也是有问题的。

单个元素的解决方案：

为了解决这些挑战，出现了一种替代方法，该方法在内部使用两个伪元素单个元素：

1. 伪元素： :before 和 :after 伪元素，都是主按钮大小的一半，形成形状的上半部分和下半部分。
2. 定位： :before 元素放置在顶部带有透视和旋转，以达到有角度的效果。 :after 元素位于下方并旋转​​以创建相反的角度。
3. 边框操作： 通过删除某些点的边框，创建六边形的外观，箭头延伸到两端。

示例代码：

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  ...

  .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;
  }
  .button.border:after {
    border-top: none;
  }

  /* Button hover styles */

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

通过这种方法，只需使用一个 HTML 元素和 CSS 即可创建拉长的六边形按钮，而不需要其他元素。

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