Angle arrow with css

So far only for plain backgrounds

by Alexander Zonov

HTML

<div class="angle">
  <div class="big"></div>
  <div class="small"></div>
</div>

<div style="background: black; width: 100%; height: 100px;"></div>

CSS

.angle {
  position: relative;
  cursor: pointer;
  padding-top: 50px;
}

.small {
  top: 1px;
  left: 0;
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  border: 24px solid transparent;
  border-left: 24px solid white;
  z-index: 10;
}

.big {
  top: 0;
  left: 0;
  position: absolute;
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-left: 25px solid black;
  z-index: 1;
}