html - 仅使用一个元素的细长六边形按钮

Question

我想只用 CSS 制作一个像这样的按钮，而不使用其他元素。

按钮图片

由于按钮附有 border，我想我通常需要 :before 和 :after 元素来创建一个箭头在一侧。因此，要在每一侧制作一个箭头，我需要在链接内添加另一个 span 元素。

我尝试的第二种方法是您在下面看到的方法。但是使用这个解决方案，它们没有正确居中，并且箭头的每一侧的长度都不同。

有人有解决方案吗？

/* General Button Style */

.button {
  display: block;
  position: relative;
  background: #fff;
  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 Border Style */

.button.border {
  border: 4px solid #e04e5e;
}
.button.border:hover {
  background: #e04e5e;
  color: #fff;
}
/* Button Ribbon-Outset Border Style */

.button.ribbon-outset.border:after,
.button.ribbon-outset.border:before {
  top: 50%;
  content: " ";
  height: 43px;
  width: 43px;
  position: absolute;
  pointer-events: none;
  background: #fff;
}
.button.ribbon-outset.border:after {
  left: -3px;
  margin-top: -40px;
  transform-origin: 0 0;
  box-sizing: border-box;
  border-bottom: 4px solid #e04e5e;
  border-left: 4px solid #e04e5e;
  transform: rotate(57.5deg) skew(30deg);
}
.button.ribbon-outset.border:before {
  right: -46px;
  margin-top: -40px;
  transform-origin: 0 0;
  box-sizing: border-box;
  border-top: 4px solid #e04e5e;
  border-right: 4px solid #e04e5e;
  transform: rotate(57.5deg) skew(30deg);
}
.button.ribbon-outset.border:hover:after {
  background: #e04e5e
}
.button.ribbon-outset.border:hover:before {
  background: #e04e5e
}

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

CodePen Demo

Answer 1

这是仅使用一个元素完成此操作的另一种替代方法。

这种方法的工作原理如下:

1. 两个伪元素 :before 和 :after 大约是主要 的一半大小(包括 borders)。按钮 元素。每个伪元素的高度在一侧(顶部/底部)为 34px + 4px 边框，在另一侧为 2px。
2. 形状的上半部分是使用 :before 元素实现的，而下半部分是使用 :after 元素实现的。
3. 使用 rotateX 和 perspective 来实现倾斜效果和定位以放置两个元素，使它们形成预期的形状。

/* 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: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;
}

<!-- Library included to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

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

Fixed Width Demo | Dynamic Width Demo

输出截图:

这已在 Chrome v24+、Firefox v19+、Opera v23+、Safari v5.1.7、IE v10 中测试。

---

按原样，这在 IE 8 和 IE 9 中会很好地降级为带边框的方形按钮。但是，由于一个border(border-bottom for :before 和border-top for :after) 它会在中间留下一个白色区域(类似于删除线)。这可以通过使用条件注释添加几个 IE < 10 特定样式来克服，如 this demo .

<!--[if IE]>
  <style>
    .button.border:after{
      top: 38px;
    }
    .button.border:hover:before, .button.border:hover:after {
      border-bottom: 4px solid #e04e5e;
    }
  </style>
<![endif]-->

IE 9 和 IE 8 的输出截图: