CSS实现同心圆内对角线的对齐问题

尝试过使用position: absolute、display: flex等方法，但均未成功实现预期效果。

预期效果 #

当前代码实现 #

CSS代码 #

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 500px;
  border: 1px solid gray;
}

.elem {
  box-sizing: border-box;
}

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 70px;
  width: 70px;
  background: white;
}

.div2 {
  border: 1px solid blue;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div3 {
  border: 1px solid green;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: white;
}

.div4 {
  border-top: 1px dashed #f00;
  width: 50%;
  transform: rotate(-45deg);
  transform-origin: top middle;
}

HTML代码 #

<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="elem div3">
      <div class="elem div4">
      </div>
    </div>
  </div>
</div>

解决方案 #

要让对角线完全贴合内圆的对角，可通过以下调整实现：

1. 修改CSS代码

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 500px;
  border: 1px solid gray;
}

.elem {
  box-sizing: border-box;
}

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 70px;
  width: 70px;
  background: white;
}

.div2 {
  border: 1px solid blue;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div3 {
  border: 1px solid green;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: white;
  position: relative; /* 设置为绝对定位容器 */
}

.div4 {
  border-top: 1px dashed #f00;
  width: 255px; /* 长度等于内圆直径×√2，覆盖对角线范围 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg); /* 先居中再旋转 */
}

2. 核心调整说明

• 给内圆.div3添加position: relative，让对角线.div4能基于它定位；
• 用absolute定位+translate(-50%,-50%)让对角线中心与内圆中心完全重合；
• 设置对角线宽度为内圆直径的√2倍，确保旋转后两端刚好贴合内圆对角。

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