如何在不使用图像的情况下在 css 中创建曲线答案

【问题标题】：How do I create curved lines in css without using an image如何在不使用图像的情况下在 css 中创建曲线
【发布时间】：2018-08-09 02:30:13
【问题描述】：

我正在尝试创建一个具有多条曲线和弯曲边框的网站，请参见图片。

我正在使用 vue 并试图在没有图像的情况下使桌面和移动设备看起来相同，除非我必须这样做。

Example of how screen should look

Curved lines examples

【问题讨论】：

好吧，你可以使用 HTML 画布：stackoverflow.com/questions/36637211/…
感谢您的快速回复
Draw a curve with css的可能重复
由于某种原因，您的示例未在此处打开。不过，我鼓励您尝试使用 SVG。它重量轻且可扩展。

标签： html css vue.js

【解决方案1】：

您可以使用 SVG 或边框来实现。

这是一个带边框的演示。

HTML

<div class="curve"></div>

CSS

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

MDN 了解更多关于边框参数的信息

【讨论】：