JSFiddle - React, Tailwind, and code Playground

Triangular buttons

by jshacker

HTML

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

CSS

.clickable {
  cursor: pointer;
}

.triangle {
  width: 0;
  height: 0;
  margin: 1em;
  border-width: 1em;
  border-color: transparent;
  border-style: solid;
}

.triangle.bottom {
  border-top-width: 0;
  border-bottom-width: 2em;
  border-bottom-color: red;
}

.triangle.top {
  border-top-width: 2em;
  border-bottom-width: 0;
  border-top-color: red;
}

.triangle.left {
  border-left-width: 2em;
  border-right-width: 0;
  border-left-color: red;
}

.triangle.right {
  border-left-width: 0;
  border-right-width: 2em;
  border-right-color: red;
}

.triangle.left.top {
  border-color: red transparent transparent red;
  border-width: 1em;
}

.triangle.right.top {
  border-color: red red transparent transparent;
  border-width: 1em;
}

.triangle.left.bottom {
  border-color: transparent transparent red red;
  border-width: 1em;
}

.triangle.right.bottom {
  border-color: transparent red red transparent;
  border-width: 1em;
}