<div class="chrome"></div>

.chrome, .chrome:after {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.chrome {
  width: 340px;
  height: 340px;
  margin: -170px 0 0 -170px;
  background-color: #ffcf00;
  background-image: -webkit-linear-gradient(-30deg, #21aa29 117px, transparent 117px), -webkit-linear-gradient(30deg, #21aa29 158px, transparent 158px), -webkit-linear-gradient(-30deg, #d62408 184px, transparent 184px), -webkit-linear-gradient(-90deg, #d62408 96px, transparent 96px);
  background-image: -moz-linear-gradient(-30deg, #21aa29 117px, transparent 117px), -moz-linear-gradient(30deg, #21aa29 158px, transparent 158px), -moz-linear-gradient(-30deg, #d62408 184px, transparent 184px), -moz-linear-gradient(-90deg, #d62408 96px, transparent 96px);
  background-image: -o-linear-gradient(-30deg, #21aa29 117px, transparent 117px), -o-linear-gradient(30deg, #21aa29 158px, transparent 158px), -o-linear-gradient(-30deg, #d62408 184px, transparent 184px), -o-linear-gradient(-90deg, #d62408 96px, transparent 96px);
  background-image: linear-gradient(120deg, #21aa29 117px, rgba(0, 0, 0, 0) 117px), linear-gradient(60deg, #21aa29 158px, rgba(0, 0, 0, 0) 158px), linear-gradient(120deg, #d62408 184px, rgba(0, 0, 0, 0) 184px), linear-gradient(180deg, #d62408 96px, rgba(0, 0, 0, 0) 96px);
  background-repeat: no-repeat;
  background-position: 60% 100%, 0, 0, 0;
  background-size: 50% 40%, 40% 100%, auto, auto;
}

.chrome:after {
  content: '';
  display: block;
  width: 128px;
  height: 128px;
  border: 12px solid #fff;
  margin: -76px 0 0 -76px;
  background: #2159d6;
}