css triangles

by jshacker

HTML

<div class="triangle"></div>
<div class="triangle triangle-down"></div>
<div class="triangle triangle-left"></div>
<div class="triangle triangle-right"></div>

<a class="triangle-before triangle-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>

CSS

:root {
  --len: 10px;
}

.triangle {
  width: 0;
  height: 0;
  border-left: var(--len) solid transparent;
  border-right: var(--len) solid transparent;
  border-bottom: var(--len) solid red;
  margin: var(--len) auto;
}

.triangle-down {
  border-bottom: none;
  border-top: var(--len) solid red;
}

.triangle-left {
  border-left: none;
  border-right: var(--len) solid red;
  border-bottom: var(--len) solid transparent;
  border-top: var(--len) solid transparent;
}

.triangle-right {
  border-right: none;
  border-left: var(--len) solid red;
  border-bottom: var(--len) solid transparent;
  border-top: var(--len) solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: var(--len) solid transparent;
  border-right: var(--len) solid transparent;
  border-bottom: var(--len) solid red;
  margin: 0 var(--len);
  content: "";
  display: inline-block;
}

.triangle-after-right:after {
  border-right: none;
  border-left: var(--len) solid blue;
  border-bottom: var(--len) solid transparent;
  border-top: var(--len) solid transparent;
}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: var(--len) solid transparent;
  border-right: var(--len) solid transparent;
  border-bottom: var(--len) solid blue;
  margin: 0 var(--len);
  content: "";
  display: inline-block;
}

.triangle-before-left:before {
  border-left: none;
  border-right: var(--len) solid blue;
  border-bottom: var(--len) solid transparent;
  border-top: var(--len) solid transparent;
}

a {
  font-size: 2rem;
  text-transform: lowercase;
  margin: 0 var(--len);
}