CSS 实现漂亮的弧形

HTMl 如下:

<div class="d1"></div>

CSS 如下：

.d1{ width: 100%; height: 100px; position: relative; overflow: hidden; }
.d1::after{ content: ""; width: 140%; height: 100px; position:absolute; left:
-20%; top: 0; background-color: rgb(44, 111, 199); z-index: -1; border-radius: 0
0 50% 50%; }

实现效果如下：