css制作弧形

使用 border-radius 属性

通过调整 border-radius 属性可以创建不同弧度的圆角效果。设置四个角的不同值可以形成弧形。例如：

.element {
  width: 200px;
  height: 100px;
  border-radius: 50% 50% 0 0;
}

这会生成一个顶部半圆形弧线，底部保持直角。

使用伪元素和 transform

通过伪元素结合 transform 可以实现更复杂的弧形效果。创建一个伪元素并旋转或缩放：

.element::after {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  border-radius: 100% 100% 0 0;
  transform: scaleX(1.5);
}

这种方法适合创建不对称或拉伸的弧形。

SVG 路径绘制

使用 SVG 的 <path> 元素可以精确控制弧形形状。在 CSS 中嵌入 SVG：

.element {
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 50"><path d="M0,50 Q50,0 100,50" fill="%23ccc"/></svg>');
}

通过调整 d 属性中的贝塞尔曲线控制点可以修改弧度。

clip-path 属性

clip-path 可以裁剪元素为任意形状，包括弧形。使用 CSS 的 ellipse() 或自定义路径：

.element {
  clip-path: ellipse(75% 50% at 50% 0%);
}

这种方法支持动态调整弧形的曲率和位置。

径向渐变背景

通过 radial-gradient 可以模拟弧形视觉效果：

.element {
  background: radial-gradient(ellipse at top, transparent 70%, #fff 70.5%);
}

适合创建弧形边缘的过渡效果，但实际元素形状不变。