1

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.

inserir a descrição da imagem aqui

5
  • sim, é possível, use o canvas do html5
    – Paz
    Commented 21/11/2017 às 17:59
  • 1
    Traços ou pontos?
    – Sam
    Commented 21/11/2017 às 17:59
  • Traços... a seta como na imagem...
    – Ramos
    Commented 21/11/2017 às 18:02
  • Só encontro exemplos interativos.
    – Ramos
    Commented 21/11/2017 às 18:09
  • 1
    Acho valido usar SVG como alternativa. Commented 21/11/2017 às 18:28

1 Resposta 1

2

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>

1
  • Obrigado @hugocsl :)
    – Ramos
    Commented 21/11/2017 às 19:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .