在div的转角处放置半径变化的圆心

Question

我已经在传单中创建了一个控件，它由一个图标，一个数字和2个圆圈组成，看起来像这样：

-  -  -  -  -  -  -  
|                 * |
|ICON   3.2         |
|                 * |
 -  -  -  -  -  -  -

我希望右上角和下角的2个圆具有固定的中心位置-但现在，它只是框（用于创建圆）的角，具有固定的位置位于div的角落。

圆圈改变半径，我不介意它们是否彼此重叠或与div的边界重叠。

CSS：

.dot {
    height:10px;
    width: 10px;
    stroke: black;
    stroke-width:1px; 
    border-radius: 50%;
    position: absolute;
}

div{        
    display:inline-block;
    float:left;
}

.col1{
    width:20px;
    height:25px;
    display: flex;
    align-items: center;
}


.col2{
    width:25px;
    height:25px;
    display: flex;
    align-items: center;
}

.col3{
    width:20px;
    height:25px;
    position: relative;
}

JAVASCRIPT / HTML：

//set content of control
control_object[d.key].setContent(
'<div class="col1">' +transport_icons[d.key] + '</div>
 <div class="col2"> &nbsp;' + (number_of_itches/time_spent).toFixed(2) + '</div>
 <div class="col3">
     <div class="dot" style="background-color:green; top: 0px; right: 0px; height:' + 2*green_radius + 'px; width:' + 2*green_radius + 'px">
     </div>
     <div class="dot"  style="background-color:red; bottom: 0px; right: 0px; height:' + 2*red_radius + 'px; width:' + 2*red_radius + 'px">
     </div>
  </div>');

Answer 1

好的。所以这是一个仅CSS的解决方案。尽管它是否可以与您当前的代码很好地结合还有待观察。主要的后备之处是，您可能无法在该点内放置任何html，否则它将损坏。

这个想法是，您使用.dot css属性将宽度和高度元素0（top, left, bottom, right）定位在希望圆心使用的位置。

然后使用::after伪元素绘制圆圈。由于该圆圈将在左上方绘制，因此我们必须将其左右平移50％才能居中。

为便于使用，圆圈从.dot元素继承了宽度和高度。由于max-width和max-height设置为0，因此.dot元素将永远不会显示，但是width和height可以设置为任何值。这意味着您可以在元素的样式属性中使用当前的设置宽度和高度的系统，它应该可以正常工作。

背景也是继承的，因此也可以从.dot类进行设置。

const circles = Array.from(document.querySelectorAll('.dot'))

function changeSize(width=1, height=1){
  circles.forEach(circle => {
    const cwidth = circle.style.width || 25,
      cheight = circle.style.height || 25
    circle.style.width = (parseInt(cwidth) + width) + "px"
    circle.style.height = (parseInt(cheight) + height) + "px"
  })
}

.dot {
  position : absolute;
  background : silver;
  width : 25px;
  height : 25px;
  max-width : 0px;
  max-height : 0px;
}

.dot::after {
  content : "";
  display : block;
  background : inherit;
  transform : translate(-50%, -50%);
  width : inherit;
  height : inherit;
  border-radius : 50%;
}

.container {
  position : relative;
  width : 300px;
  height : 150px;
  background : red;
}

<div class="container">
  <div 
    class="dot"
    style="right : 25px; top: 25px;">
   </div>
  <div 
    class="dot"
    style="right : 25px; bottom: 25px;">
   </div>
</div>
<div>
Width
<button onclick="changeSize(1, 0)">+</button>
<button onClick="changeSize(-1, 0)">-</button>
</div>

<div>
Height
<button onclick="changeSize(0, 1)">+</button>
<button onClick="changeSize(0, -1)">-</button>
</div>

<div>
both
<button onclick="changeSize(1, 1)">+</button>
<button onClick="changeSize(-1, -1)">-</button>
</div>