CSS 将响应式圆 div 分成两半

Question

我有带边框的 div，这使它们看起来像“圆形”。最后一个 div 应该用不同的文本水平分成两半，但是，它仍然应该是一个圆圈。

我使用 Bootstrap，我不知道如何在响应式设计中为一个 div 和另一个 div 圆整一半的圆。有人能帮帮我吗？多谢! https://www.bootply.com/0ksNKnSjZT

固定尺寸​​，看起来很简单Half circle with CSS (border, outline only)

附言如果可能，我不想使用背景图片。

Answer 1

您在border-radius中使用了百分比值，百分比值取决于元素width和height，并取小尺寸(即宽度或高度)。

在你的情况下(在第 3 个圆圈中)，.bublina 的高度和宽度不相同，即高度小于宽度，这就是为什么 border-radius:100% 并没有让它成为圈子。

所以你必须在这里使用 px 值而不是 % 值:

 .bublina.upper {
    border-top-right-radius: 300px;
    border-top-left-radius: 300px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
 }

 .bublina.lower {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 300px;
    border-bottom-left-radius: 300px;
 }