Live Code::DevDic

div {
  width: 100px;
  height: 100px;
  float: left;
  margin: 50px 20px 20px;
  border-radius: 50%;
  position: relative;
}
div::after {
  content: attr(data-type);
  position: absolute;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
}
div:nth-of-type(odd)::after {
  top: -20px;
}
div:nth-of-type(even)::after {
  bottom: -20px;
}

div::before {
  content: attr(class);
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  text-shadow: 0 0 4px #FFF;
}

.radial-basic {
    background: red; /* 그라디언트를 지원하지 않는 경우 */
    background: -webkit-repeating-radial-gradient(#FF0000, #FFFF00); /* For Safari 5.1 to 6.0 */
    background: -o-repeating-radial-gradient(#FF0000, #FFFF00); /* For Opera 11.1 to 12.0 */
    background: -moz-repeating-radial-gradient(#FF0000, #FFFF00); /* For Firefox 3.6 to 15 */
    background: repeating-radial-gradient(#FF0000, #FFFF00 20%, #00FF00 50%); /* 표준(마지막에 작성) */
}

.radial-shape-circle {
    width: 200px;
    background: repeating-radial-gradient(circle, #FF0000, #FFFF00 20%, #00FF00 50%);
}

.radial-shape-ellipse {
    width: 200px;
    background:repeating-radial-gradient(ellipse,  #FF0000, #FFFF00 20%, #00FF00  30% );
}

.radial-transparent {
    background: repeating-radial-gradient(circle, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 20%, rgba(255, 0, 0, 1) 30%),
        url("https://resrc.devdic.com/img/bysize/below_200/01.png");
}

Console