用css制作半圆
使用 CSS 制作半圆
方法一：通过 border-radius 和固定宽高
通过设置元素的 border-radius 为 50%，并结合固定的宽度和高度，可以制作半圆。通常需要将宽度设置为高度的两倍（或反之），并仅对一个角应用圆角。
.half-circle {
width: 100px;
height: 50px;
background-color: #ff6b6b;
border-radius: 50px 50px 0 0;
}width: 100px和height: 50px确保宽度是高度的两倍。border-radius: 50px 50px 0 0使顶部左右两侧圆角化，底部保持直角。
方法二：通过 clip-path 裁剪
使用 clip-path 可以更灵活地裁剪出半圆形，适用于复杂形状需求。
.half-circle {
width: 100px;
height: 100px;
background-color: #4ecdc4;
clip-path: circle(50% at 50% 0);
}clip-path: circle(50% at 50% 0)将元素裁剪为以顶部中心为圆心的半圆。- 调整
at后的坐标可以改变半圆的方向（如50% 100%为底部半圆）。
方法三：通过旋转和溢出隐藏
结合 transform 和 overflow: hidden 实现半圆效果。
.container {
width: 100px;
height: 50px;
overflow: hidden;
}
.circle {
width: 100px;
height: 100px;
background-color: #ff9f1c;
border-radius: 50%;
transform: translateY(-50%);
}- 外层容器限制高度为半圆高度。
- 内层圆形通过
transform: translateY(-50%)上移，隐藏下半部分。
方法四：使用 SVG 内联
直接使用 SVG 绘制半圆，适合需要动态修改或动画的场景。
<svg width="100" height="50" viewBox="0 0 100 50">
<path d="M 0,50 A 50,50 0 0 1 100,50 Z" fill="#2ec4b6" />
</svg>d属性中的A 50,50 0 0 1 100,50定义半径为 50 的半圆弧。Z闭合路径形成半圆。
注意事项
- 方向调整：通过修改
border-radius的顺序（如0 0 50px 50px）或clip-path的坐标可以改变半圆朝向。 - 浏览器兼容性：
clip-path和 SVG 在现代浏览器中支持良好，但需测试旧版本兼容性。
