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

正如 Harry 在评论中建议的那样，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, 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>