主页 / coding / 问题 / 76953393
Accepted
DarkW1nter
Asked: 2023-08-22 20:36:22 +0800 CST

css 在 div 顶部产生曲线效果

  • 772

我正在寻找一只手来产生该图像中的曲线效果。 在此输入图像描述

目前，我有一个具有相同背景颜色的全宽 div，其上方的 div 使用具有以下内容的类：

    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #ffecd8;
    border-radius: 100%/100px 100px 0 0;
    transform: translateY(-55px);

已经快到了，但曲线的顶部看起来很平坦。谁能建议一个更好的方法来做到这一点？

css

1 个回答

  1. Best Answer

    clip-path您可以使用和的组合ellipse。

    椭圆的语法是：
    [radius-x] [radius-y] at [position-x] [position-y]

    div {
  clip-path: ellipse(150% 100% at 50% 100%);
}


/* for visualization purpose only */
body {
  margin: 0;
}

div {
  height: 100vh;
  background-color: blue;
}
    <div></div>

    • 3

相关问题