你如何从边界画一条线？

Question

我目前有这个 HTML：

#circle {
  background-color: orange;
  max-width: 40px;
  margin-right: 20px;
  margin-bottom: 20px;
  min-width: 40px;
  min-height: 40px;
  font-size: 12px;
  border-radius: 50%;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  float:left;
}
#innerContent {
  border: solid 2px black;
  padding: 3px;
}
#pointerDiv{
    float:left;
}

<div id="circle"><span id='innerContent'>123</span></div><div id='pointerDiv'>text goes here</div>

我正在努力实现这个效果：

基本上，一条从边框指向元素的线我可以用解释数字的文本填充。我该怎么做呢？

Answer 1

你总是可以使用伪元素吗？我在下面创建了一个 basic 模型：

.circle {
  height: 55px;
  width: 55px;
  border-radius: 50%;
  background: orange;
  position: relative;
  display: inline-block;

}
.circle:before {
  position: absolute;
  content: "hi";
  height: 60%;
  top: 20%;
  left: 20%;
  width: 60%;
  border: 2px solid black;
}
.circle:after {
  position: absolute;
  content: "";
  width: 100%;
  right: -85%;
  top: 50%;
  border-bottom: 1px solid black;
}
.tooltip {
  display: inline-block;
  margin-left: 55px;
    height: 60px;
  width:60px;
}
.wrapper{
  display:block;
  }

<div class="wrapper">
  <div class="circle"></div>
  <div class="tooltip">text goes here</div>
</div>

Answer 2

您可以使用 CSS 边框或 SVG 画线（可能与某些浏览器不兼容）

#circle {
  background-color: orange;
  max-width: 40px;
  margin-bottom: 20px;
  min-width: 40px;
  min-height: 40px;
  font-size: 12px;
  border-radius: 50%;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  float: left;
}
#innerContent {
  border: solid 2px black;
  padding: 3px;
}
#pointerDiv {
  float: left;
  line-height: 40px;
}
#line-svg {
  float: left;
  margin-top: 20px;
  margin-left: -6px;
  width: 100px;
}

<div id="circle"><span id='innerContent'>123</span>
</div>
<svg id="line-svg">
  <line x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(0,0,0);stroke-width:4" />
</svg>
<div id='pointerDiv'>text goes here</div>

Answer 3

下面是一个示例方法，通过使用伪元素然后根据需要绝对定位它来实现这一点。

left: -58px 的原因是因为margin-right（我已将其从有问题的 20px 修改为 50px 以作说明）是 50px + 框的边框在圆圈内有几个 px所以这也必须考虑。使行的width 小于left 的值，以使行在pointerDiv 之前结束。

请注意，我还在#circle 中添加了clear: both，以防万一您想在另一个下方添加更多此类条目。如果不需要，可以将其删除。

#circle {
  background-color: orange;
  max-width: 40px;
  margin-right: 50px;
  margin-bottom: 20px;
  min-width: 40px;
  min-height: 40px;
  font-size: 12px;
  border-radius: 50%;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  float: left;
  clear: both;
}
#innerContent {
  border: solid 2px black;
  padding: 3px;
}
#pointerDiv {
  float: left;
  position: relative;
  height: 40px;
  line-height: 40px;
}
#pointerDiv:before {
  content: '';
  position: absolute;
  border: 1px solid black;
  top: 50%;
  left: -58px;
  width: 55px;
}

<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>text goes here</div>

<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>some lengthy text goes here</div>

<div id="circle"><span id='innerContent'>123</span>
</div>
<div id='pointerDiv'>short txt</div>