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

【问题标题】：Create a button with double arrows at the end在末尾创建一个带有双箭头的按钮
【发布时间】：2016-01-18 00:46:23
【问题描述】：

我正在尝试为按钮实现此效果：

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

有什么想法吗？

【问题讨论】：

this answer 中使用的方法对您和this pen 都有帮助。

标签： twitter-bootstrap css button css-shapes

【解决方案1】：

注意：如果您必须支持所有浏览器，则I linked in comments 的答案中使用的方法是最好的。如果 IE 支持不是强制性的，那么您可以使用此答案中的剪辑路径。无法在其他线程中发布此方法，因为它的要求不同，因此在此处添加为答案。

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

优点：

输出具有响应性，因为它是基于 SVG 的，即使文本超过一行也可以适应。
与三个元素不同，只需要一个元素（例如我在 cmets 中提供的 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>

【讨论】：

【解决方案2】：

检查这个解决方案，它使用pseudo-element 创建右第一个三角形和两个倾斜的伪元素来创建扩展部分，box-shadow 用于重新创建它们

body {
  background: #3D3D3D;
}
.btn {
  width: 200px;
  height: 50px;
  padding: 10px;
  background: tomato;
  display:block;
  position:relative;
  margin:50px;
  line-height:50px;
  color:#fff;
  text-decoration:none;
  font-size:20px;
}
.btn:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  border-left: 35px solid tomato;
  right:-35px;
  top:0px;
  }
.btn:before{
  position:absolute;
  content:"";
  width:15px;
  height:35px;
  background:tomato;
  transform:skew(45deg);
  right:-40px;
  top:0;
  box-shadow:25px 0 0 0 tomato;
  }
.btn_inner:after{
  position:absolute;
  content:"";
  width:15px;
  height:35px;
  transform:skew(-45deg);
  right:-40px;
  bottom:0;
  background:tomato;
  box-shadow:25px 0 0 0 tomato;
  }

<a href="#" class="btn">
  <span class="btn_inner">Some Text</span>
</a>

【讨论】：

【解决方案3】：

尝试将它与该代码结合起来：

#triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 9px solid red;
border-bottom: 20px solid transparent;
padding-right: 20px;
display: block;
}

那是一个三角形。

希望我能帮上忙。

开发者

【讨论】：