necesito ayuda con esto necesito tener un resultado así en el camino
Este es el camino
Este es el código HTML
div class="parte__roja-camino">
<div class="parte__roja-1">1</div>
<div class="parte__roja-2">2</div>
<div class="parte__roja-3">3</div>
<div class="parte__roja-seguro">
<span class="parte-salida">salida</span>
</div>
<div class="parte__roja-5">5</div>
<div class="parte__roja-6">6</div>
<div class="parte__roja-7">7</div>
<div class="parte__roja-8">8</div>
<div class="parte__roja-9">9</div>
<div class="parte__roja-seguro">seguro</div>
<div class="parte__roja-11">11</div>
<div class="parte__roja-12">12</div>
<div class="parte__roja-13">13</div>
</div>
Y este es el css
.parte__roja-camino {
width: 100%;
height: 20%;
position: absolute;
display:flex;
left: 0;
bottom: 0;
}
.parte__roja-camino > div {
width: calc(100% / 13);
height: 100%;
}
.parte__roja-7{
transform: rotate(-5deg);
background: red;
}
El resultado debe verse así
Resultado
Así va el código como lo llevo necesito ayuda para curvear en el espacio blanco del bloque rojo que cubra ese espacio en rojo el alto debería ser de 20% y el ancho del 100%
Así va el proyecto
1