如何在CSS和html5中创建曲线和圆？

Question

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

有关更多信息，请参见插图：

curve如何在上方创建相同的曲线和圆？我真的需要帮助，我尝试了一切，但没有用一点帮助将是非常好的

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>

Answer 2

使用border-radius: css属性创建圆形或圆形的正方形边缘