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

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

尝试将其与该代码结合使用：

#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;
}

那是一个三角形。

希望能帮到你。

德夫伦

Answer 2

Note: The approach that is used in the answer that 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 或父对象具有非实体背景，这也能正常工作。

缺点：

• 在任何版本的 IE（包括 Edge）中 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>

Answer 3

检查此解决方案，它使用 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>