Triangular buttons

Top Down buttons

by jshacker

HTML

<div class="triangle bottom clickable"></div>
<div class="triangle top clickable"></div>

CSS

.clickable {
  cursor: pointer;
}

.triangle {
  border-style: solid;
  width: 0;
  height: 0;
  margin: 10px;
}
.bottom {
  border-color: transparent transparent red transparent;
  border-width: 0 10px 15px 10px;
}
.top {
  border-color: red transparent transparent transparent;
  border-width: 15px 10px 0 10px;
}