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

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

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

如何在上面创建相同的曲线和圆？我真的需要帮助我尝试了所有的方法但都不管用

---

一点帮助将非常好

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

.main{
边界半径：50%；
宽度：300px；
高度：300px；
背景：红色；
填充：50px；
位置：绝对位置；
顶部：-240px；
}
.内部{
边界半径：50%；
宽度：300px；
高度：300px；
背景：白色；
}
.innerWhite{
边框：1px实心50px；
边界半径：50%；
宽度：50px；
高度：50px；
背景：白色；
位置：绝对位置；
底部：45px；
}

---

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

.main{
边界半径：50%；
宽度：300px；
高度：300px；
背景：红色；
填充：50px；
位置：绝对位置；
顶部：-240px；
}
.内部{
边界半径：50%；
宽度：300px；
高度：300px；
背景：白色；
}
.innerWhite{
边框：1px实心50px；
边界半径：50%；
宽度：50px；
高度：50px；
背景：白色；
位置：绝对位置；
底部：45px；
}

---

您可以将径向渐变与遮罩结合使用：

.box{
高度：300px；
最大宽度：1024px；
保证金：自动；
边框：1px纯红；
位置：相对位置；
}
.box：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：径向梯度（以50%-840像素的速度旋转1800px，透明53.8%，红色54%60.8%，透明61%）；
-webkit掩模：径向梯度（20%70%的圆形，透明80px，#fff 81px）；
遮罩：径向梯度（20%70%的圆形，透明80px，#fff 81px）；
}
身体{
背景：url(https://i.picsum.photos/id/1000/800/800.jpg)中心/盖；
}

---

您可以将径向渐变与遮罩结合使用：

.box{
高度：300px；
最大宽度：1024px；
保证金：自动；
边框：1px纯红；
位置：相对位置；
}
.box：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景：径向梯度（以50%-840像素的速度旋转1800px，透明53.8%，红色54%60.8%，透明61%）；
-webkit掩模：径向梯度（20%70%的圆形，透明80px，#fff 81px）；
遮罩：径向梯度（20%70%的圆形，透明80px，#fff 81px）；
}
身体{
背景：url(https://i.picsum.photos/id/1000/800/800.jpg)中心/盖；
}

---

---

SVG是您真正想要的。我认为在html css中很好是的，当然，祝您好运。你可以花一整天的时间来修改一些不太好用的东西，或者在文档中插入两行SVG。您的选择。对于svg，我们将始终存在响应问题，而使用hml css，您可以管理根本不正确的响应。SVG的响应速度非常之快。SVG是您真正想要的。我认为在html css中，这很好是的，当然，祝您好运。你可以花一整天的时间来修改一些不太好用的东西，或者在文档中插入两行SVG。您的选择。对于svg，我们将始终存在响应问题，而使用hml css，您可以管理根本不正确的响应。svg的响应速度非常快。对于svg，我们总是会遇到响应速度问题，而使用hml css，您可以管理响应速度。我看到您的答案是曲线，因为在您的代码上，而不是曲线上，有一个圆圈VG可以很容易地通过使用来响应速度。我遇到的最大问题是曲线级别，但不是在圆圈@mathieu459的层次上，我的答案只是演示如何创建类似于您想要的东西，可以通过使圆圈divs width变大并使用translate CSS属性来修复，对于svg，我们总是会有一个响应问题，而使用hml css，您可以管理响应。我看到您的答案只是曲线，因为在您的代码中，有一个圆圈，而不是曲线，只要使用它，svg就可以轻松响应。我最大的问题是曲线的层次，但不是圆的层次@mathieu459，我的答案只是演示如何创建类似于您想要的东西，可以通过使圆divs width变大和使用translate CSS属性来修复，但需要跟踪和错误，直到达到您想要的效果。