Question

我有一个边框的div，使它们看起来像圆形＆＃34;。最后一个div应该水平分割成具有不同文本的一半，但是，它仍然应该是一个圆圈。

我使用Bootstrap，我不知道如何在响应式设计中为一个div和另一个div舍入一半圆圈。有人可以帮帮我吗？非常感谢！ https://www.bootply.com/0ksNKnSjZT

固定大小，似乎很容易Half circle with CSS (border, outline only)

P.S。如果可能，我不想使用背景图片。

Answer 1

您已使用str2中的百分比值，百分比值取决于元素border-radius和width，并取小维度的百分比（即宽度或高度）。

在你的情况下（在第3个圆圈中），height的高度和宽度不同，即高度小于宽度，这就是为什么.bublina没有使它成圆形。

因此，您必须使用border-radius:100%值而不是px值，例如：

Answer 2

使用两个带有包装的圆圈，使用overflow: hidden隐藏包装中的一半圆圈。要使用圆边框，请使用border-radius: 50%

＆＃13;

.wrapper {
  position: relative;
}

.wrapper .circle:before {
  content: '';
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  border: 3px solid blue;
  display: block;
  border-radius: 50%;
}

.wrapper .circle.top:before {
  top: 0;
}

.wrapper .circle.bottom:before {
  bottom: 0;
  border-color: red;
}

.wrapper .circle {
  height: 28px;
  overflow: hidden;
  position: relative;
}

.wrapper span {
  position: absolute;
  left: 0;
  top: 15px;
}

＆＃13;

<div class="wrapper">
  <span>My Text</span>
  <div class="circle top"></div>
  <div class="circle bottom"></div>
</div>

＆＃13;

Answer 3

您可以尝试使用px代替%

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

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

Answer 4

使用此方法，您只需更改.circle_holder css中的宽度和高度值，其余值将落实到位（宽度值小于文本宽度看起来很奇怪）

＆＃13;

.top_circle {
    border-top-left-radius: 10000px;
    border-top-right-radius: 10000px;
    border-top:1px solid gray;
    border-left:1px solid gray;
    border-right:1px solid gray;
    height:50%;
    position:relative;
}

.top_circle div {
    text-align:center;
    vertical-align:bottom;
    position:absolute;
    bottom:-7.5px;
    width:100%;
}

.bottom_circle {
    border-bottom-left-radius: 10000px;
    border-bottom-right-radius: 10000px;
    border-bottom:1px solid gray;
    border-left:1px solid gray;
    border-right:1px solid gray;
    height:50%;
}

.circle_holder {
    position:relative;
    width:123px;
    height:123px;
    padding:0px;
}

＆＃13;

<div class="circle_holder">
  <div class="top_circle"><div>Sometext</div></div>
  <div class="bottom_circle"></div>
</div>

＆＃13;

CSS将响应圈div分成两半

4 个答案: