HTML 代码：
“`html
<div class=”circle”>
<span class=”inner-circle”>
</span>
</div>
CSS 代码：
“`css
.circle {
width: 200px;
height: 300px;
border: 1px solid #ccc;
margin: 10px auto;
transform: rotate(45deg);
.circle span {
display: block;
width: 100%;
height: 100%;
background-color: #f2f2f2;
position: relative;
.circle span:before,
.circle span:after {
content: “”;
position: absolute;
left: 50%;
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 100px solid #f2f2f2;
.circle span:after {
left: 25%;
transform: rotate(-45deg);
transform-origin: 50% 100%;
.circle span:inner-circle {
width: 100%;
height: 100%;
background-color: #ddd;
position: relative;
.circle span:inner-circle:before,
.circle span:inner-circle:after {
content: “”;
position: absolute;
left: 50%;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ddd;
.circle span:inner-circle:after {
left: 25%;
transform: rotate(-90deg);
transform-origin: 50% 100%;
上面的代码创建了一个半圆形，其直径为 200 像素和 300 像素，颜色为蓝色。通过使用 CSS 的 `border-radius` 属性，大家可以控制半圆形的圆角大小。另外，大家使用 `transform` 属性将其旋转 45 度。最后，使用 `:before` 和 `:after` 伪元素来创建半圆形的渐变背景。
通过使用 CSS，大家可以轻松地创建半圆形效果，从而丰富网页的外观和布局。