切成两半

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可以弥补边框（设置为10px）创建的空间。这样，您将获得一个完美的半圆。

尝试一下：

#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。