如何使用css创建波形答案

【问题标题】：How to create wave shape using css如何使用css创建波形
【发布时间】：2017-09-05 17:44:11
【问题描述】：

我正在尝试将 li 元素显示为波浪。我不想使用任何背景图像，但边界半径不支持负值。我希望你能帮助我。

【问题讨论】：

您还尝试了什么？你能发布一些示例代码吗？
我怀疑你是否可以用 CSS 创建随机平滑曲线，我认为没有 SVG 是不可能的
看看this thread 并尝试那里提到的选项。
嗯，好的，谢谢。 SVG 似乎最适合。

【解决方案1】：

我能得到的最接近的是仅使用 css。

.one {
  position: absolute;
  top: 22px;
  left: 19px;
  width: 230px;
  height: 180px;
  background: #0F1E3C;
  border-radius: 100%;
  clip: rect(70px, auto, auto, 45px);
  transform:rotate(90deg);
}

.one:before {
  content: '';
  position: absolute;
  top: -15px;
  left: -62px;
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 100%;
}

.two {
  position: absolute;
  top: 156px;
  left: 59px;
  width: 230px;
  height: 180px;
  background: #0F1E3C;
  border-radius: 100%;
  clip: rect(70px, auto, auto, 45px);
  transform:rotate(-90deg);
}

.two:before {
  content: '';
  position: absolute;
  top: -15px;
  left: -62px;
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 100%;
}

<div class="one"></div>
<div class="two"></div>

【讨论】：

不错的尝试伙伴（尽管我仍然建议使用 SVG）:)
哟，但我刚刚尝试过它可能对限制使用 svgs 的人有用
没有错，伙计，绝对没有。我喜欢 CSS 形状 :)
我也喜欢创建形状和使用伪元素，看到你的 codepen 个人资料很酷，你太棒了！ @哈利

【解决方案2】：

虽然在这里 SVG 会是一个非常更好的选择，但您可以使用类似边框的 hack 来创建此形状的基础。

这是这种形状的一个基本示例，虽然我会说还有很大的改进空间：

div {
  position:relative;
  height:100px;
  width:100px;
  background:lightgray;
  overflow:hidden;
}

div:before {
  content:"";
  position:absolute;
  top:calc(-100% - 25px);
  left:00%;
  height:200%;
  width:200%;
  border-radius:50%;
  background:cornflowerblue;
  border-bottom:50px solid blue;
}
div:nth-child(2) {
  transform:rotate(180deg);
  margin-left:40px;
  margin-top:-25px;
}

<div></div>
<div></div>

快速 SVG 版本：

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="407pt" height="126pt" viewBox="0 0 407 126">
  <g transform="translate(0,126) scale(0.1,-0.1)" fill="#000000" stroke="none">
    <path d="M43 1223 c-4 -21 -8 -119 -7 -218 0 -169 2 -185 28 -265 153 -466
545 -728 1030 -689 276 23 694 112 1116 239 175 53 375 99 501 116 149 19 363
15 453 -10 134 -37 273 -132 351 -241 26 -36 42 -51 46 -42 4 7 13 58 20 115
29 239 -44 492 -201 700 -99 132 -238 236 -405 303 l-76 30 -417 -3 -417 -4
-190 -37 c-104 -21 -275 -58 -380 -82 -316 -73 -466 -96 -678 -102 -124 -4
-218 -2 -280 7 -175 23 -341 91 -437 177 l-49 44 -8 -38z" />
  </g>
</svg>

【讨论】：

为 SVG 投票，尤其是为使用 SVG 的 JB 投票：D