在CSS中,使用border-radius属性可以制作出圆形。但是如果要制作两个圆连接在一起,就需要进行一些调整。.circle { width: 100px; height: 100px; bord
在CSS中,使用border-radius属性可以制作出圆形。但是如果要制作两个圆连接在一起,就需要进行一些调整。
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: red; } .half-circle { width: 50px; height: 100px; border-radius: 0 100px 100px 0; background-color: blue; }
这是我们所需要的两个基本样式:一个红色的圆形和一个蓝色的半圆形。接下来,使用CSS定位这些元素来制作连接的形状。
.container { position: relative; width: 150px; height: 100px; } .half-circle { position: absolute; right: 0; top: 0; } .circle { position: absolute; left: 0; top: 0; }
我们创建了一个容器元素,并将其定位为相对。然后,在其中分别嵌套红色圆和蓝色半圆形,并使用position: absolute;
将它们定位到左右两侧。此时,两个元素会重叠在一起,效果并不是我们所期望的。
.half-circle { /* ... */ transform: translateX(50%); } .circle { /* ... */ transform: translateX(-50%); }
使用transform: translateX();
属性让圆形和半圆形分别向左右移动一半,重合在容器中间,形成一个完整的形状。
现在你已经掌握了CSS制作连接圆形的技巧。以下是完整的代码示例:
.container { position: relative; width: 150px; height: 100px; } .circle { position: absolute; width: 100px; height: 100px; border-radius: 50%; background-color: red; left: 0; top: 0; transform: translateX(-50%); } .half-circle { position: absolute; width: 50px; height: 100px; border-radius: 0 100px 100px 0; background-color: blue; right: 0; top: 0; transform: translateX(50%); }
粉丝
0
关注
0
收藏
0