html – 使用css创建s形曲线

我想用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>

请帮我

解决方法

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>

> SVG on MDN

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) 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>