📅  最后修改于: 2023-12-03 15:24:27.598000             🧑  作者: Mango
在 CSS 中创建半圆可以使用伪元素 ::before
和 ::after
和 border-radius
属性来实现。
最简单的方法是使用 border-radius
和 transform
属性来创造一个半圆:
.half-circle {
width: 200px;
height: 100px;
border-radius: 0 0 100px 100px;
background-color: red;
transform: rotate(-45deg);
}
这会创建一个宽度为 200 像素、高度为 100 像素的红色半圆。
使用 ::before
或 ::after
伪元素可以创建两个半圆组成一个完整的圆形。这可以使用 border-radius
属性和伪元素的 content
和 display
属性来实现:
.half-circle-container {
position: relative;
width: 200px;
height: 100px;
}
.half-circle-container::before, .half-circle-container::after {
content: '';
display: block;
position: absolute;
top: 0;
}
.half-circle-container::before {
left: 0;
width: 100px;
height: 100px;
border-radius: 100px 0 0 100px;
background-color: red;
}
.half-circle-container::after {
right: 0;
width: 100px;
height: 100px;
border-radius: 0 100px 100px 0;
background-color: red;
}
这会创建一个宽度为 200 像素、高度为 100 像素的红色圆形。
以上这些方法可以用来创建简单的圆形或半圆形,但如果需要更复杂的形状,则可能需要使用 SVG 或其他图像格式。