使用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>

请帮我

Answer 1

SVG

正如哈利在评论中所建议的那样,SVG将是你最好的选择,因为如果不使用多个元素,伪元素或使用可能不支持的CSS3属性,CSS中的双曲线是不可行的.

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>

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>