如何为我的 div 获得倾斜曲线？如下图所示[重复]答案

【问题标题】：How to obtain a slanted-curve for my div? Like one shown below [duplicate]如何为我的 div 获得倾斜曲线？如下图所示[重复]
【发布时间】：2021-06-29 08:28:54
【问题描述】：

这是一个拉伸整个手机屏幕的div；我希望它从右上角到左上角有一条倾斜的曲线（如图所示）。我试过border-radius，但没有按预期工作。有没有办法使用 CSS 做到这一点？

【问题讨论】：

您可以使用css transform rotate。
我认为你应该改用 svgs。
如果我使用旋转，里面的内容也会旋转吗？
我无法使用 svg，它是我需要获得倾斜曲线的 div

标签： html css

【解决方案1】：

也许clip-path 属性可能适合你.....

.container {
  background: #f6eee0;
  clip-path: polygon(0 10%, 100% -2%, 100% 100%, 0 100%);
  height: 80vh;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

这是更新后的 sn-p，包括曲线，如果您需要增加/减少曲线的大小，只需使用 clip-path 属性中的负值，直到找到最合适的发现并最适合您...

【讨论】：

嘿 Uzair，这很有帮助，谢谢。顺便说一句，有没有办法获得曲线？（如果您注意到提供的图像，它不是一条直线，而是一条小曲线..）
嘿@gopalprabhu 我以为有一条曲线，但由于图像的颜色，有点难以看到，是的，曲线确实是可能的，我正在更新我的代码.......
不客气兄弟@gopalprabhu