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

Question

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

Navigation

#1 by (1 votes)

1

Can you draw an arrow, plus the strokes, as in the following image, using HTML5 and CSS3?

Or should I create and place a graphic? I wish it was drawn.

html html5 css css3

asked by anonymous 21.11.2017 / 18:52

1 answer

jQuery Slider - Jump between defined values and sync with other 2 sliders How to put a div with page content on the side of the vertical menu that came included?

score 1 · Accepted Answer

Look there if it helps you. Also consider 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>