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

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

注意:如果您必须支持所有浏览器,那么我在评论中链接的答案中使用的方法是最好的.如果IE支持不是必需的,那么您可以使用此答案中的剪辑路径.无法在其他线程中发布此方法,因为它的要求不同,因此在此处添加答案.

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

优点:

• 输出是响应的,因为它是基于SVG的,即使文本跨越多行也可以适应.
• 与三个元素不同,只需要一个元素(比如我在评论中提供的笔).
• 剪切是透明的,因为我们剪切路径,因此即使body父或非父背景具有非实体背景,这也会有效.

缺点:

• 缺乏支持的clip-pathIE中的任何版本,包括边缘.对clip-pathEdge的支持正在考虑之中,将来可能会实施.

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>