如何用css实现曲线[重复]

Question

我需要实现如图中的曲线。关于如何仅使用 CSS 实现的任何想法？

我想要达到的目标：

我尝试了什么：

.box {
   width: 500px; 
   height: 100px;  
   border: solid 5px #000;
   border-color: #000 transparent transparent transparent;
   border-radius: 50%/100px 100px 0 0;
}

Answer 1

clip-path 属性可以解决问题。它像svg一样工作（类似）。使用clip-path 构建元素需要一点学习。这是一个关于如何使用的好报告：

https://ishadeed.com/article/clip-path/

但在项目中使用时要小心。浏览器仅部分支持该属性：

https://caniuse.com/?search=clip-path

所以你需要测试......或使用 svg。
这是一个常见的受支持功能。