如何仅用单个HTML元素（不含伪元素）实现双色拼接圆形？

安全阿岳

2026-5-29

单个元素实现左右分色环形圆（不含伪元素）

当然可以只用单个HTML元素实现你想要的左右分色环形圆效果，而且完全不需要伪元素，下面给你两种可靠的实现方式：

方法一：利用锥形渐变（Conic Gradient）+ 背景裁剪

这种方法直观且兼容性较好（现代浏览器都支持），完美匹配你原来的边框式环形效果：

HTML代码

<div class="two-color-ring"></div>

CSS代码

$size: 100px;
$border-width: 20px;

.two-color-ring {
  width: $size;
  height: $size;
  padding: $border-width; /* 模拟边框的宽度 */
  /* 锥形渐变实现左右半环分色 */
  background: conic-gradient(red 0deg 180deg, green 180deg 360deg);
  /* 只让padding区域显示背景，中间内容区透明 */
  background-clip: content-box;
  border-radius: 50%; /* 把整体变成圆形 */
}

原理说明

padding: $border-width 相当于你原来代码中border的宽度，用来预留环形的空间
conic-gradient 从0度到180度渲染红色，180度到360度渲染绿色，刚好实现左右分色
background-clip: content-box 限制背景只在padding区域显示，中间的content部分保持透明，最终形成环形效果

方法二：利用边框图片（Border Image）

这种方法直接操作border，但要注意border-image和border-radius的兼容性（部分旧浏览器可能不支持两者同时生效）：

CSS代码

$size: 100px;
$border-width: 20px;

.two-color-ring {
  width: $size;
  height: $size;
  border: $border-width solid;
  /* 用线性渐变作为边框图片，左右各占50%颜色 */
  border-image: linear-gradient(to right, red 50%, green 50%) 1;
  border-radius: 50%;
}