html - 如何在 css 和 html5 中创建曲线和圆？

Question

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

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

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

标签： htmlcss

Answer 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>