Tem como desenhar uma seta, mais os traços, como na imagem a seguir, utilizando HTML5 e CSS3?
Ou devo criar um elemento gráfico e colocar? Gostaria que fosse desenhado.
Tem como desenhar uma seta, mais os traços, como na imagem a seguir, utilizando HTML5 e CSS3?
Ou devo criar um elemento gráfico e colocar? Gostaria que fosse desenhado.
Olha ai se te ajuda. Considere também usar SVG.
.seta {
position: relative;
justify-content: center;
display: flex;
margin-top: 50px;
transform: rotate(90deg);
}
.seta span {
width: 50px;
height: 5px;
background-color: greenyellow;
position: relative;
}
.seta span:before,
.seta span:after {
margin-left: 22px;
content: "";
width: 35px;
height: 100%;
background-color: greenyellow;
position: relative;
display: flex;
}
.seta span:before {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
bottom: 11px;
}
.seta span:after {
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: -6px;
}
.container-linha {
position: relative;
justify-content: center;
display: flex;
margin-top: 50px;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.linha {
width: 1px;
border-right: 5px dashed greenyellow;
height: 50vh;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<div class="seta">
<span></span>
</div>
<div class="container-linha">
<div class="linha"></div>
</div>