Nice complementary colors. A #CodePen by JB Price.

index.html

<div class="box red"></div>
<div class="box orange"></div>
<div class="box yellow"></div>
<div class="box green"></div>
<div class="box teal"></div>
<div class="box blue"></div>
<div class="box purple"></div>
<div class="box pink"></div>

style.css

body {
  padding:1%;
}
.box {
  width:100px;
  height:100px;
  position:relative;
  overflow:hidden;
  display:inline-block;
  margin: 0 10px 10px 0;
}

.box:before {
  display:block;
  background:#f00;
  content:' ';
  border:100px solid;
  border-color:#aaa #aaa;
  border-width:0 100px 100px;
}
.red:before    {border-color:#bc3f39 #d74c3f;}
.orange:before {border-color:#d3711a #ef871b;}
.yellow:before {border-color:#e5a128 #ffbb2a;}
.green:before  {border-color:#a3b53a #b6d141;}
.teal:before   {border-color:#00b78a #00ce98;}
.blue:before   {border-color:#4badb7 #55c0d3;}
.purple:before {border-color:#6b619e #8070ba;}
.pink:before   {border-color:#bf497f #e6528c;}