CSS：按钮上有多个箭头

Question

我想要在右边创建一个带有多个箭头的按钮，如下所示：

这就是我所做的： https ： //jsfiddle.net/aqjfLy7s/ 。 我无法弄清楚如何让第一个箭头与按钮边框齐平。 所有后续箭头也必须遵循相同的模式。

 .wrapper { width: 50%; border: 1px solid #ccc; padding: 50px 0px; margin: auto; display: flex; justify-content: center; align-items: flex-end; } .w1 { display: flex; justify-content: center; align-items: center; width: 100%; margin-left: 30px; } .w2 { display: flex; justify-content: center; align-items: center; margin-left: 30px; margin-right: 30px; background-color: #ffcc00; padding: 10px; } .btn { color: #000; border: 1px solid #000; border-right: none; padding: 0.5rem 1rem; width: 80%; } span { width: 1rem; height: 1rem; border: 0.25rem solid; border-color: black transparent transparent black; transform: rotate(135deg); margin-left: -12px; } 

 <div class="wrapper"> <div class="w1"> <a class="btn" href="#">Test</a> <span></span> <span></span> <span></span> <span></span> </div> <div class="w2">123</div> </div> 

Answer 1

这是另一个想法，你可以简单地依赖伪元素和偏斜变换

 .box { display:inline-block; padding:10px; margin-right:60px; border:1px solid; border-right:none; position:relative; } .box:before, .box:after{ content:""; position:absolute; margin-left:-1px; top:-1px; left:100%; bottom:50%; width:30px; background:linear-gradient(to right,#000 28%,transparent 29%) 1px 0/25% 100%; transform:skewX(45deg); transform-origin:top; } .box:after { transform:skewX(-45deg); transform-origin:bottom; bottom:-1px; top:50%; } 

 <div class="box"> some text </div> <div class="box"> some long long text </div> <div class="box"> 2 lines <br> text </div> 

您可以轻松扩展到任意数量的边框

 .box { --b:4; display:inline-block; padding:10px; margin:5px; margin-right:calc(var(--b)*15px); border:1px solid; border-right:none; position:relative; } .box:before, .box:after{ content:""; position:absolute; margin-left:-1px; top:-1px; left:100%; bottom:50%; width:calc(var(--b)*7.5px); background:linear-gradient(to right,#000 28%,transparent 29%) 1px 0/calc(100%/var(--b)) 100%; transform:skewX(45deg); transform-origin:top; } .box:after { transform:skewX(-45deg); transform-origin:bottom; bottom:-1px; top:50%; } 

 <div class="box"> some text </div> <div class="box" style="--b:2"> some long long text </div> <div class="box" style="--b:10"> 2 lines <br> text </div> <div class="box" style="--b:30"> some long long text </div>