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

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



我已经和它斗争了几个小时，我能想到的最好的就是这个 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 行，则箭头保持全高。

有什么想法吗？

最佳答案

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

优点:

输出是响应式的，因为它是基于 SVG 的，即使文本跨度超过一行也能适应。

与三个元素不同，只需要一个元素(就像我在评论中提供的 the pen 一样)。

剪切路径是透明的，因为我们正在剪切路径，因此即使 body 或父对象具有非纯色背景，这也将起作用。

缺点:

在包括 Edge 在内的任何版本的 IE 中，clip-path 都缺少 support。 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>

关于twitter-bootstrap - 在末尾创建一个带有双箭头的按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33218348/