Хорошо, после небольшого расследования и поиска решений я достиг кривых линий. Но они не идеальны, как я хочу.
Желаемый эффект:
И это текущий эффект:
Мне интересно, есть ли у кого-то лучшее решение для этого или любого решения, которое может достичь желаемого эффекта.
Здесь код:
.left-corner-lines {
width: 252px;
float: left;
min-height: 40px;
position: relative;
}
.left-round-line {
border-radius: 0 0 0 100%;
border: 4px solid #fbbc56;
position: absolute;
top: 0;
right: -4px;
}
.left-round-line.yellow-round {
height: 12px;
width: 17px;
border-color: transparent transparent transparent #fbbc56;
}
.left-round-line.blue-round {
height: 21px;
width: 26px;
border-color: transparent transparent transparent #0090d0;
}
.left-round-line.purple-round {
height: 30px;
width: 35px;
border-color: transparent transparent transparent #915da3;
}
.left-round-line.pink-round {
height: 39px;
width: 44px;
border-color: transparent transparent transparent #cc5299;
}
.left-round-line.green-round {
height: 48px;
width: 53px;
border-color: transparent transparent transparent #bed140;
}
<div class="left-corner-lines">
<div class="left-round-line yellow-round"></div>
<div class="left-round-line blue-round"></div>
<div class="left-round-line purple-round"></div>
<div class="left-round-line pink-round"></div>
<div class="left-round-line green-round"></div>
</div>