zulässige Farbwerte:

HDML:

<div class="opposites uk-icon">
<div class="opposites ul "> </div>
<div class="opposites hr "> </div>
<div class="opposites ur "> </div>
<div class="opposites hl"> </div>
</div>

CSS:

.opposites {
  width: 26px;
  height: 26px;
}

.hl, .hr, .ur, .ul {
  width: 12px;
  height: 12px;
  position: absolute;
}
.hl, .hr {
  top: 0;
}
.hr, .ur {
  left: 13px;
}
.ur, .ul {
  top: 13px;
}
.hl, .hl {
  left: 0;
}
.hl {
  background: #81b821;
  transform-origin: bottom right;
}
.hr {
  background: #525252;
  transform-origin: bottom left;
}
.ur {
  background: #81b821;
  transform-origin: top left;
}
.ul {
  background: #525252;
  transform-origin: top right;
}