SOURCE

<div class="taiji"></div>
<div class="pentagram"></div>
<div class="hexagon"> </div>

/* ------太极图------- */
$taiji-size: 100px;
$taiji-rate: 0.1;
.taiji {
  position:relative;
  display:inline-block;
  width: $taiji-size;
  height: $taiji-size/2;
  background-color: #fff;
  border-bottom: $taiji-size/2 solid #000;
  border-radius:100%;
}

.taiji::before,.taiji::after{
  content: '';
  position:absolute;
  width:percentage($taiji-rate);
  height:percentage($taiji-rate*2);
  border-radius:100%;
  border-style:solid;
  border-width:$taiji-size*(1-$taiji-rate*2)/4;
  top:50%;
}
.taiji::before {
  background-color:#000;
  border-color:#fff;
}
.taiji::after {
  background-color:#fff;
  border-color: #000;
  right: 0;
}

/* ------五角星------- */
$pentagram-size: 100px;
$pentagram-color: #000;
$tan36: 0.7265;
$cos36: 0.809;
.pentagram {
  margin: 40px 0;
  position:relative;
  display:inline-block;
  width: 0px;
  border-top: round($pentagram-size/2*$tan36) solid $pentagram-color;
  border-left: round($pentagram-size/2) solid transparent;
  border-right: round($pentagram-size/2) solid transparent;
}
.pentagram::before {
  content:'';
  position:absolute;
  width: 0px;
  top: round(-$pentagram-size/2*$tan36);
  left:round(-$pentagram-size/2);
  border-top: round($pentagram-size/2*$tan36) solid $pentagram-color;
  border-left: round($pentagram-size/2) solid transparent;
  border-right: round($pentagram-size/2) solid transparent;
  transform:rotate(72deg);
  transform-origin: $pentagram-size/2 round($pentagram-size/2*$tan36*(1-1/(1+$cos36)));
}
.pentagram::after {
  content:'';
  position:absolute;
  width: 0px;
  top: round(-$pentagram-size/2*$tan36);
  left:round(-$pentagram-size/2);
  border-top: round($pentagram-size/2*$tan36) solid $pentagram-color;
  border-left: round($pentagram-size/2) solid transparent;
  border-right: round($pentagram-size/2) solid transparent;
  transform:rotate(-72deg);
  transform-origin: $pentagram-size/2 round($pentagram-size/2*$tan36*(1-1/(1+$cos36)));
}

/* ------六边形------- */
$hexagon-size: 100px;
$hexagon-color: #000;
$hexagon-side-length: ($hexagon-size/2)/0.866;
.hexagon {
  display:inline-block;
  width: $hexagon-size;
  height:$hexagon-side-length;
  background: $hexagon-color;
  margin: $hexagon-side-length/2 0;
  &::before,&::after {
    content:'';
    position:relative;
    display:block;
    border-left:  $hexagon-size/2 solid transparent;
    border-right:  $hexagon-size/2 solid transparent;
  }
  &::before {
    top: ceil(-$hexagon-side-length/2);
    border-bottom:  $hexagon-side-length/2 solid $hexagon-color;
  }
  &::after {
    bottom: floor(-$hexagon-side-length/2);
    border-top:  $hexagon-side-length/2 solid $hexagon-color;
  }
}