<div class="test"></div>

.test{    
    width: 800px;    
    height: 200px;    
    position: relative;    
    background: linear-gradient(red 5%, blue 5%, blue 95%,red 95%);    
    overflow: hidden;    
    margin: 10px;
}/*
 * 大圓
 留四分之一圓,90度,那么寬高為(父元素高度-20)的根2倍
 top為10 - ((父元素高度-20)的根2倍 - (父元素高度-20))/2
 left沒想公式，慢慢調(diào)的
 * */
 .test:after{
     content: '';    
     width: 254.55844122715712px;    
     height: 254.55844122715712px;    
     border-radius: 50%;    
     background: red;    
     position: absolute;    
     top:-27.27922061357856px;    
     left:-217px;    
     z-index: 1;
}/*
 小圓
 * */
 .test:before{
     content: '';    
     width: 254.55844122715712px;    
     height: 254.55844122715712px;    
     border-radius: 50%;    
     background: blue;    
     position: absolute;    
     top:-27.27922061357856px;    
     left:-227px;    
     z-index: 2;
}

這個(gè)如果按照圖片上的效果把陰影也加上，不好實(shí)現(xiàn)，也沒必要(如果這么復(fù)雜，直接要美工出圖)

不加陰影的