如何用css创建波形

Question

我正在尝试使用svg重新创建此图片：

这是小提琴：http://jsfiddle.net/g7kgdo8u/

但是我需要用css这个图像。这可能吗？

Answer 1

您可以使用border-bottom-left-radius和border-bottom-right-radius

div {  
  background-color: lightgrey;
  height: 55px;
  width: 300px;
  border-bottom-left-radius: 100%;
  border-bottom-right-radius: 50%;
}

div:after {
  content:"";
  display: block;
  background-color: cornflowerblue;
  height: 50px;
  width: 300px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div></div>

Answer 2

您也可以使用.box { width:300px; height:100px; background: radial-gradient(circle at 50% -300%,blue 90%,transparent 90.5%), radial-gradient(circle at 60% -300%,grey 90%,transparent 90.5%); }：

执行此操作

＆＃13;

＆＃13;

<div class="box"></div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;