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

不加陰影的

<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;
}