Я хочу сделать кнопку с несколькими стрелками справа, как на рисунке ниже:
Я не могу понять, как получить первую стрелку вровень с границей кнопки. Все последующие стрелки также должны следовать той же схеме.
Вот что у меня получилось:
.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>