如何消除CSS中对角相邻边框间的细线条？

下面几个方案可以解决你遇到的扇形边框对角细缝问题：

方案1：微小缩放让边框重叠 #

给每个扇形元素添加轻微的缩放，让边框覆盖住相邻缝隙。把scale()加到transform的最后（transform顺序会影响最终效果）：

.segment {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform-origin: 0 0;
}

然后修改每个segment的行内样式，比如：

<div class="segment segment1" style="transform: rotate(0deg) skew(18deg) scale(1.01)"></div>

缩放数值可以根据实际效果微调，比如1.005或1.02，只要能盖住细缝又不影响整体视觉即可。

方案2：用伪元素模拟边框 #

把原生border换成伪元素实现，避免变换后边框的渲染精度问题：

.segment {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform-origin: 0 0;
  padding: 10px; /* 对应原来的边框宽度 */
  box-sizing: border-box;
}

.segment::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  z-index: -1;
}

同时去掉.segment1、.segment2、.segment3里的border属性，只保留background。伪元素会延伸到padding区域，自然覆盖相邻的细缝。

方案3：用outline替代border #

outline的渲染逻辑和border不同，不会在变换后的元素对角出现细缝，是最简单的解决方案：

.segment1 {
  background: #091862;
  outline: 10px ghostwhite solid;
  outline-offset: -1px; /* 微调偏移让outline贴合元素 */
}

.segment2 {
  background: #245ab2;
  outline: 10px ghostwhite solid;
  outline-offset: -1px;
}

.segment3 {
  background: #2fc0dd;
  outline: 10px ghostwhite solid;
  outline-offset: -1px;
}

直接替换掉原来的border属性即可，outline-offset的数值可以根据实际显示调整。

补充说明 #

你之前尝试的margin: -1px无效，是因为transform后的元素margin不会影响其变换后的渲染位置重叠；调整旋转/ skew角度也难精准对齐对角边框。上面的方案都是通过让边框元素轻微重叠，或者换用更适配变换元素的边框实现方式，来解决渲染精度导致的细缝问题。

修改后完整代码示例（方案3） #

.circle-container {
  position: relative;
  display: inline-block;
}

.circle {
  position: relative;
  width: 500px;
  height: 500px;
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
}

.segment {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform-origin: 0 0;
}

.segment:hover {
  background: lightcyan;
  opacity: 0.8;
  transition: opacity 1s ease;
}

.segment1 {
  background: #091862;
  outline: 10px ghostwhite solid;
  outline-offset: -1px;
}

.segment2 {
  background: #245ab2;
  outline: 10px ghostwhite solid;
  outline-offset: -1px;
}

.segment3 {
  background: #2fc0dd;
  outline: 10px ghostwhite solid;
  outline-offset: -1px;
}

.cutout {
  width: 50%;
  height: 50%;
  background-color: ghostwhite;
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  pointer-events: visible;
}

<div class="circle-container">
  <div class="circle">
    <div class="segment segment1" style="transform: rotate(0deg) skew(18deg)"></div>
    <div class="segment segment2" style="transform: rotate(72deg) skew(18deg)"></div>
    <div class="segment segment3" style="transform: rotate(144deg) skew(18deg)"></div>
    <div class="segment segment1" style="transform: rotate(216deg) skew(18deg)"></div>
    <div class="segment segment2" style="transform: rotate(288deg) skew(18deg)"></div>
  </div>
  <div class="cutout"></div>
</div>

内容的提问来源于stack exchange，提问作者zolo00