How to draw shapes with HTML5 and CSS, in this case: an arrow?

Asked

Viewed 844 times

1

It has how to draw an arrow, plus the strokes, as in the following image, using HTML5 and CSS3?

Or should I create a graphic element and place it? I would like it to be drawn.

inserir a descrição da imagem aqui

html css html5 css3

  • yes, it is possible, use the canvas of Html5

  • 1

    Dashes or dots?

  • Strokes... the arrow as in the image...

  • I only find interactive examples.

  • 1

    I think it’s valid to use SVG as an alternative.

1 answer

2


Look if it helps you. Consider also using 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>

  • Thanks @hugocsl :)

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.