你如何从边界画一条线？

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

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

.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

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

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>

Answer 3

您可以使用 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>

你如何从边界画一条线？

How do you draw a line from a border?

css

css-shapes