将一个圆圈切成两半[重复]

Question

你能给我一个关于如何把这个圆圈切成两半的建议吗？也将它们浮动在左右之间。

.hello {
  background-color: red;
  width: 200px;
  height: 180px;
  border: transparent;
  border-radius: 50%;
  opacity: 0.50;
}

<div class="hello"></div>

Answer 1

这可以完全通过使用边框的 CSS 来完成。请注意，高度必须是宽度的一半才能给出半圆。

border-top-left or right-radius 是添加曲线的东西。因此，添加额外的 +10 可以弥补边框（设置为 10 像素）创建的空间。这样你就得到了一个完美的半圆。

试试这个：

#hello {
    width: 200px;
    height: 100px; 
    background-color: red;
    border-top-left-radius: 110px;  
    border-top-right-radius: 110px;
    border: 10px solid red;
    border-bottom: 0;
    float: right; /* Change this to left to float it to left */
}

<div id="hello"></div>

我让它正确浮动。把左边的值改成float: left;

希望这会有所帮助！

Answer 2

你应该先把2x1做成矩形，然后用border-radius把它做成圆形，但要靠边。见以下代码：

.half-circle {
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    border: 1px solid red;
}

要制作出色的CSS 形状，您可以查看this cheatsheet page。