使用CSS创建S形曲线

Question

我想使用CSS创建下面图片中展示的曲线。

我尝试了下面这个：

.curve {
  background-color: #8aa7ca;
  height: 65px;
  width: 160px;
  -moz-border-radius-bottomright: 25px 50px;
  border-bottom-right-radius: 25px 50px;
}

<div class="curve">
  <p>This is a sample text.</p>
</div>

请帮助我

- Ashok Dongare

---

使用CSS并非不可能实现双曲线，但请使用SVG来进行。如果你真的想用CSS创建这样的"S"形或波浪形状，请参考这里 - https://dev59.com/tl4c5IYBdhLWcg3wjrDR#27780572?s=1|2.9777#27780572。 - Harry

老实说，我不是一个CSS专家。这个SVG是什么？ - Ashok Dongare

https://developer.mozilla.org/zh-CN/docs/Web/SVG - Harry

我会看一下。谢谢。 - Ashok Dongare

Answer 1

SVG

正如哈里在评论中建议的那样，SVG将是您最好的选择，因为在CSS中使用双曲线如果不使用多个元素、伪元素或可能不支持的CSS3属性，则不可行。

SVG代表可缩放矢量图形。Web浏览器将其视为图像，但是您可以在SVG中添加文本和普通HTML元素。

它在所有浏览器中得到了很好的支持，可以在此查看：CanIUse

<svg width="466" height="603" viewbox="0 0 100 100" preserveAspectRatio="none">
  <path d="M0,0 
           L100,0
           C25,50 50,75 0,100z" fill="#8aa7ca" />
</svg>

• MDN 上的 SVG

CSS

当然，CSS 也能实现此功能，但需要使用伪元素 :before 和 :after。但对于曲线效果不佳，会出现锯齿状。

div {
  background: blue;
  width: 50px;
  height: 75px;
  position: relative;
}
div:before {
  content: '';
  background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px);
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 75px;
}
div:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 75px;
  background: blue;
  border-radius: 0 0 100% 0 / 0 0 100% 0;
  top: 100%;
  left: 0;
}

<div></div>

- Stewartside

---

如果我想翻转SVG图像，该怎么办？而不是在左边，它将在右边，这样曲线就会在左边了。谢谢。 - Si8

@Si8 所以你可以通过使用 CSS 变换来翻转它，或者你可以交换坐标，这只需要约 5 分钟的时间。 - Stewartside

@Stewartside :) 我刚刚做了 transformY，一开始我没有想到，但今天又是星期五... 感谢您的回复。您知道有哪个网站可以让我实时更改 svg 更新的坐标吗？ - Si8

@Si8，你可以在CodePen、JSFiddle或任何前端开发工具中完成它。这是一个手写的SVG，如果你自己尝试一下，它并不是非常困难 :) - Stewartside

所以你使用了Moveto，Lineto和Curveto吗？只是想理解一下。 - Si8

Answer 2

SVG

SVG是指可缩放矢量图形，在其中使用单个路径即可创建该图形。

<svg height="300px" viewBox="0 0 100 100">
  <path fill="CornFlowerBlue" d="M0,0
  100,0
  C50,20 50,80 0,100 Z" />
</svg>

- Persijn

---

你在 100, 0 中缺少了 L。SVG 自动知道这是 Lineto 吗？ - Si8

@Si8 当你使用 M 开始一个 SVG 路径时，你可以将它们链接在一起，所以 M0,0 100,0 就是从 0,0 到 100,0 的一条直线。你可以无限次地这样做，比如 M1,1 2,2 3,3 等等。 - Persijn

啊哈……原来你没有使用 L，现在我明白了。还在学习 SVG。 - Si8

Answer 3

你可以使用纯CSS来实现这个效果。 演示 这里使用了一个大的盒子阴影来创建第二个曲线：

.wrap {
  position: relative;
  height: 400px;
  width: 100%;
  margin: 0 auto;
  max-width: 1024px;
}
.shape {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  z-index: 10;
}
.shape:after {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 90%;
  border-radius: 0 50% 0 0;
  box-shadow: 0 0 0 999px lightgray;
}
.shape2 {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: 50%;
  background: lightgray;
  border-radius: 0 0 0 50%;
  z-index: 10;
}

/******************************/

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  vertical-align: top;
  overflow: hidden;
  background: cornflowerblue;
 
}

<div class="wrap">
  <div class="shape"></div>
  <div class="shape2">This will be where you can place the text to go down the right hand side of the slider</div>
  
</div>

- jbutler483

Answer 4

我有一个类似的需求，但是发现这个任务的CSS对于我的知识水平来说过于复杂。因此，我使用了一个在线波形生成器。 通过它，你可以绘制所需的波形并生成SVG。 然后，你只需要复制粘贴生成的波形代码即可。 这是我使用的一个：
SVG波形生成器

- Buzzzzzzz