如何在 css 和 html5 中创建曲线和圆？答案

【问题标题】：How to create curve and circle in css and html5?如何在 css 和 html5 中创建曲线和圆？
【发布时间】：2020-05-20 19:49:19
【问题描述】：

我是 css 世界的新手，我正在尝试使用 bootstrap、css 和 html5 进行这样的响应式设计

更多信息，这里有一个插图：

curve 如何在上面创建相同的曲线和圆？我真的需要帮助我尝试了一切但它不起作用一点帮助会非常好

【问题讨论】：

SVG 是您真正想要的。
我认为 html css 很好
是的，当然，祝你好运。你可以花一整天的时间来修改一些不能很好地工作的东西，或者你可以在你的文档中塞进 2 行 SVG。您的选择。
对于 svg，我们总是会遇到响应问题，而使用 hml css 您可以管理响应性
这根本不是真的。 SVG 的响应速度非常可笑。

标签： html css

【解决方案1】：

你有两个选择，最好是使用SVG（如果是我，我会选择这个），你也可以实现你在 HTML 中提供的东西，但不是每个形状都可以使用 HTML，如果那么你需要的曲线和圆圈，可以实现类似的东西：

.main {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  background: red;
  padding: 50px;
  position:absolute;
  top:-240px;
}

.inner {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  background: white;
}

.innerWhite {
  border: 1px solid 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: white;
  position: absolute;
  bottom: 45px;
}

<div class="main">
  <div class="inner">
    <div class="innerWhite"></div>
  </div>
</div>

【讨论】：

对于 svg，我们总是会遇到响应问题，而使用 hml css 您可以管理响应性
我看到你的答案只有曲线，因为在你的代码而不是曲线上有一个圆圈
SVG 可以通过使用viewBox attribute 轻松响应。
我最大的问题是在曲线的水平而不是在圆的水平i.stack.imgur.com/9vWVQ.png
@mathieu459，我的回答只是为了演示如何创建类似于您想要的东西，认为可以通过使圆形 div 宽度更大并使用 translate CSS 属性来修复，但需要跟踪和错误直到你有你想要的一样。

【解决方案2】：

你可以结合使用radial-gradient和mask：

.box {
  height:300px;
  max-width:1024px;
  margin:auto;
  border:1px solid red;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(circle 1800px at 50% -840px,transparent 53.8%,red 54% 60.8%,transparent 61%);
  -webkit-mask:radial-gradient(circle at 20% 70%, transparent 80px,#fff 81px);
          mask:radial-gradient(circle at 20% 70%, transparent 80px,#fff 81px);
}


body {
  background:url(https://i.picsum.photos/id/1000/800/800.jpg) center/cover;
}

&lt;div class="box"&gt;&lt;div&gt;

【讨论】：