[draw arrow of different angles in HTML with CSS] #HTML #CSS #arrow #drawArrow

arrow.css

.arrow {
  height: 50px;
  position: relative;
  width: 30px;
  background: black;
  margin: 100px;
  display: inline-block;
}

.arrow:before {
  content: " ";
  width: 20px;
  background: black;
  height: 45px;
  position: absolute;
  top: -15px;
  transform: rotate(50deg);
  left: -5px;
}
.arrow:after {
  content: " ";
  width: 20px;
  background: black;
  height: 45px;
  position: absolute;
  top: -15px;
  transform: rotate(-50deg);
  right: -5px;
}

.left {
  transform: rotate(-90deg);
}

.right {
  transform: rotate(90deg);
}

.half-left {
  transform: rotate(-45deg);
}

.half-right {
  transform: rotate(45deg);
}

arrow.html

<div class="arrow"> </div>
<div class="arrow left"> </div>
<div class="arrow right"> </div>
<div class="arrow half-left"> </div>
<div class="arrow half-right"> </div>

arrow.md