如何仅使用一个 HTML 元素和 CSS 创建一个细长的六边形按钮？-css教程-PHP中文网

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

DDD

发布： 2024-12-02 16:59:10

原创

953 人浏览过

How Can I Create an Elongated Hexagonal Button Using Only One HTML Element and CSS?

创建一个只有一个元素的细长六边形按钮

问题：

可以您仅使用 HTML 和 CSS 创建一个六边形按钮，而无需求助于多个元素？

可能的解决方案：

以下是仅使用单个元素实现此效果的替代方法：

利用伪元素： 使用 :before 和 :after 模仿一半的伪元素主按钮的大小，包括边框。
定义形状的一半： :before 元素形成形状的上半部分，而 :after 形成下半部分。每个都有特定的高度和边框排列，类似于六边形。
倾斜和位置：带有透视的 RotateX 用于倾斜伪元素并将它们适当定位以形成整体按钮形状.

示例代码：

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

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

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

登录后复制

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

登录后复制

注意：要使用浏览器前缀，请包含modernizr或前缀。

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