Create a button with double arrows at the end

问题:

I'm trying to achieve this effect for a button:

I've been battling it for a couple hours and the best I could come up with was this 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);
}

I want to ensure it works well responsively, so if the text breaks to 2 lines, the arrows maintain full height.

Any thoughts?

回答1:

Note: The approach that is used in the answer that I linked in comments 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.

Using SVG clipPath along with the CSS clip-path property we can create a path such that it cuts out the unwanted portions from the button (the a tag).

Pros:

• Output is responsive as it is SVG based and can adapt even if the text spans more than a line.
• Only one element is required unlike three elements (like in the pen that I provided in comments).
• The cuts are transparent as we are clipping the path and so this will work even when the body or the parent has a non-solid background.

Cons:

• Lack of support for clip-path in any version of IE including Edge. Support for clip-path in Edge is Under consideration and may get implemented in future.

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:

Check this solution this uses a pseudo-element to create the right first triangle and two skewed pseudo-elements to create the extending parts,box-shadow is used to recreate them

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:

try to combine it with that code:

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

that is a triangle.

Hope I could help.

Devlen