css3 形状，图形

Question

小白敢问大神们

使用CSS3如何实现这个图形，左边的那一点点可以无视。
谢谢各位大佬了

Answer 1

<div&nbsp;class="test"></div> .test{&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;800px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;200px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;linear-gradient(red&nbsp;5%,&nbsp;blue&nbsp;5%,&nbsp;blue&nbsp;95%,red&nbsp;95%);&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;10px; }/* &nbsp;*&nbsp;大圆 &nbsp;留四分之一圆,90度,那么宽高为(父元素高度-20)的根2倍 &nbsp;top为10&nbsp;-&nbsp;((父元素高度-20)的根2倍&nbsp;-&nbsp;(父元素高度-20))/2 &nbsp;left没想公式，慢慢调的 &nbsp;*&nbsp;*/ &nbsp;.test:after{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;'';&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;254.55844122715712px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;254.55844122715712px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;50%;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:-27.27922061357856px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:-217px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;1; }/* &nbsp;小圆 &nbsp;*&nbsp;*/ &nbsp;.test:before{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;'';&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;254.55844122715712px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;254.55844122715712px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;50%;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;blue;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:-27.27922061357856px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:-227px;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;2; }这个如果按照图片上的效果把阴影也加上，不好实现，也没必要(如果这么复杂，直接要美工出图)不加阴影的