html - 以直线为圆心

Question

我想在一条线上画一个圆，像这样:

我有以下代码:

.circle {
width: 75px;
height: 75px;
border-radius: 50%;
position: absolute;
left: 76%;
top: 41px;
background-color: #000;
}

.box {
width:500px;
height:150px;
position: relative;
border: 1px solid #eee;

.left {
width:200px;
height:100%;
position:relative;
}

<div class="Box">
    <div class="Left">
       <div class="circle">

       </div>
    </div>
    <div class="Right"></div>
</div>

但是，当我调整窗口大小时，结果是这样的:

即使在调整窗口大小时，如何确保圆圈保持原位？

Answer 1

您可以采用不同的方法并使用 .left div 上的 border-right 属性来表示 .circle 后面的垂直线>:

.circle {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  position: absolute;
  right: -37.5px; /* modified / - half of the circle's width */
  top: 41px;
  background-color: #000;
}

.box {
  width: 500px;
  max-width: 100%; /* added / responsive */
  height: 150px;
  position: relative;
  border: 1px solid #eee;
}

.left {
  width: 200px;
  max-width: 100%; /* added / responsive */
  height: 100%;
  position: relative;
  border-right: 1px solid #eee; /* added */
}

<div class="box">
  <div class="left">
    <div class="circle">

    </div>
  </div>
  <div class="right"></div>
</div>