如何创建响应式CSS弧形（环绕图片的圆形分段特效）

阿华AIGC实验室

2026-4-7

嘿，我完全懂你想要的效果——在图片周围加一段可旋转的圆形分段，还要能自适应不同屏幕对吧？不用被SVG或者复杂的clip-path搞晕，用纯CSS就能实现，而且还能轻松控制旋转角度和分段长度，我来一步步给你讲清楚~

核心实现思路

用容器包裹图片，通过绝对定位的独立元素实现外层的扇形环
利用conic-gradient快速创建可自定义的圆形分段（比clip-path更直观）
通过transform: rotate()直接控制分段的旋转位置
全用百分比/相对单位保证响应式，让元素随容器大小自动缩放

完整可运行代码

HTML结构

<div class="wrapper">
  <div class="slide-wrapper">
    <div class="image">
      <div class="circle-segment"></div>
      <img src="https://png.pngtree.com/png-vector/20230831/ourmid/pngtree-man-avatar-image-for-profile-png-image_9197908.png" alt="用户头像">
    </div>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <div class="name">-John Doe</div>
    </div>
  </div>
</div>

CSS样式

.wrapper {
  padding: 100px 0;
  background-color: #00213B;
}

.slide-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 85%;
  gap: 2.5rem;
  margin: 3.5rem auto 0;
  flex-wrap: wrap; /* 小屏幕自动换行 */
}

.slide-wrapper .content {
  width: min(70%, 600px); /* 响应式宽度：最大600px，否则占70% */
  font-size: 24px;
  font-weight: 400;
  color: #fff;
}

.slide-wrapper .content .name {
  font-weight: 900;
  margin-top: 2rem;
}

.slide-wrapper .image {
  position: relative;
  width: min(212px, 25vw); /* 响应式图片容器：最大212px，否则占视口25% */
  aspect-ratio: 1/1; /* 保持正方形，自动计算高度 */
  margin: 1rem;
  border-radius: 50%;
}

.slide-wrapper .image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #00182a;
  position: relative;
  z-index: 5; /* 确保图片在最上层 */
}

/* 关键：可旋转的圆形分段 */
.slide-wrapper .image .circle-segment {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 这里的rotate值控制分段的旋转角度，比如改成rotate(90deg)就转到正下方 */
  transform: translate(-50%, -50%) rotate(45deg);
  width: 116%;
  height: 116%;
  border-radius: 50%;
  /* 用conic-gradient创建分段：第一个颜色是分段的颜色，后面是透明区域 */
  /* 0deg 120deg 表示分段从0度到120度，长度120度，可自行调整 */
  background: conic-gradient(#8DC63F 0deg 120deg, transparent 120deg 360deg);
  z-index: 1;
  /* 伪元素实现内圈深色环，模拟双层效果 */
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%; /* 内圈大小，控制环的宽度 */
    height: 92%;
    border-radius: 50%;
    background-color: #00213B; /* 和外层背景色一致，挖空中间部分 */
  }
}