仅使用一个元件的细长六角形按钮

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演示

Answer 1

这是另一种仅使用一个元素完成此任务的方法.

这种方法如下所示:

1. 两个伪元素:before,:after大约borders是主.button元素大小的一半(包括).每个伪元素的高度在一侧(顶部/底部)为34px + 4px边界,在另一侧为2px.
2. 使用:before元件实现形状的上半部分,而使用:after元件实现下半部分.
3. 使用rotateXwith 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>

固定宽度演示 | 动态宽度演示

输出截图:

这是在Chrome v24 +,Firefox v19 +,Opera v23 +,Safari v5.1.7,IE v10中测试的.

原样,这会在IE 8和IE 9中很好地降级为带边框的方形按钮.然而,由于一个border(border-bottomfor :before和border-topfor :after)的无效,它将在中间留下一个白色区域(类似于穿透线).这可以通过使用条件注释添加几个IE <10特定样式来克服,如本演示中所示.

<!--[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的屏幕截图: