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

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

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

<强>优点：

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

缺点：

在包括Edge在内的任何版本的IE中，clip-path都缺少support。 Edge中clip-path的支持正在考虑之中，将来可能会实施。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 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>

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

这是一个三角形。

希望我能提供帮助。

Devlen

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

3 个答案: