twitter-bootstrap - 创建一个末尾带有双箭头的按钮

Question

我正在尝试为一个按钮实现这种效果:

我已经与它抗争了几个小时，我能想到的最好的就是这个 CodePen .

<a href="#" class="btn-wrap">
  <span class="btn btn-primary">See the Proof</span>
</a>

.btn {
    border: 0;
    border-radius: 0;
    font-weight: 300;
    font-size: 20px;
    text-transform: uppercase;
}
.btn-primary {
    position: relative;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}
.btn-primary:before, .btn-primary:after {
    position: absolute;
    content: '';
    right: -20px;
    width: 10px;
    height: 50%;
    background: inherit;
}
.btn-primary:before {
  top: 0;
  transform: skewX(30deg);
}
.btn-primary:after {
  bottom: 0;
  transform: skewX(-30deg);
}
.btn-wrap {
    position: relative;
    display: inline-block;
}
.btn-wrap:before, .btn-wrap:after {
    position: absolute;
    content: '';
    right: -40px;
    width: 10px;
    height: 50%;
    background: #337ab7;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    transition: all .2s ease;
}
.btn-wrap:hover:before, .btn-wrap:hover:after {
    background: #23527c;
}
.btn-wrap:before {
  top: 0;
  transform: skewX(30deg);
}
.btn-wrap:after {
  bottom: 0;
  transform: skewX(-30deg);
}

我想确保它能很好地响应，所以如果文本分成 2 行，箭头会保持完整高度。

有什么想法吗？

Answer 1

Note: The approach that is used in the answer that I linked in comments is the best if you have to support all browsers. If IE support is not mandatory then you can use clip paths like in this answer. Could not post this approach in the other thread because its requirements are different and hence adding as answer here.

使用 SVG clipPath 和 CSS clip-path 属性，我们可以创建一个路径，这样它就可以从按钮中删除不需要的部分(a 标签)。

优点:

• 输出是响应式的，因为它是基于 SVG 的，即使文本跨越一行以上也可以适应。
• 只需要一个元素，这与三个元素不同(例如我在评论中提供的 the pen)。
• 剪切是透明的，因为我们正在剪切路径，因此即使 body 或父级具有非纯色背景，这也能正常工作。

缺点:

• 缺少support适用于任何版本的 IE(包括 Edge)中的 clip-path。 Edge 中对 clip-path 的支持正在考虑中，可能会在未来实现。

body {
  background: gray;
}
a {
  display: block;
  background: rgb(255,126,0);
  color: white;
  width: 300px;
  min-height: 35px;
  padding: 4px 5% 4px 4px;
  margin-bottom: 10px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 24px;
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

<svg width="0" height="0">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <path d="M0,0 0.79,0 0.83,0.5 0.79,1 0.81,1 0.85,0.5 0.81,0 0.86,0 0.9,0.5 0.86,1 0.88,1 0.92,0.5 0.88,0 0.93,0 0.97,0.5 0.93,1 0,1z" />
    </clipPath>
  </defs>
</svg>
<a href="#" class="btn-wrap">
  <span class="btn btn-primary">See the proof</span>
</a>

<a href="#" class="btn-wrap">
  <span class="btn btn-primary">See the proof when there is large text</span>
</a>