用css3制作各种图形

矩形

width=height

.aa{
      width: 100px;
      height: 100px;
      background: red;
}
<div class="aa"></div>

长方形

width!=height

.aa{
      width: 100px;
      height: 150px;
      background: red;
}
<div class="aa"></div>

圆

.aa{
      width: 100px;
      height: 150px;
      background: red;
      border-radius:50%;
}
<div class="aa"></div>

圆环

.aa{
      width: 100px;
      height: 100px;
      
      border-radius: 50%;
      border:20px solid transparent;
      border-left-color:red;
      border-top-color: #f60;
      border-bottom-color: blue;
      border-right-color: green; 
    }
<div class="aa"></div>

半圆

 .aa{
      width: 100px;
      height: 50px;
      background: red;
      border-radius: 50px 50px 0 0;
    
    }
<div class="aa"></div>

1/4圆

 .aa{
      width: 100px;
      height: 100px;
      background: red;
      border-radius: 100px 0 0;
    
    }
<div class="aa"></div>

椭圆

 .aa{
      width: 100px;
      height: 200px;
      background: red;
      border-radius: 100px/200px;
    
    }
<div class="aa"></div>

椭圆环

  .aa{
      width: 100px;
      height: 200px;
      background: red;
      border-radius: 100px/200px;
      position: relative;
    
    }
    .aa .bb{
      width: 100px;
      height: 200px;
      background: #fff;
      border-radius: 100px/200px;
      position: absolute;
      transform: scale(0.5,0.5);
    }
<div class="aa">
  <div class="bb"></div>
</div>

总结：诸如环/对称可以看出利用复制+css3的rotate()/translate（）/sacle（）可以起到非常好的效果