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>

我正试图达到这个效果：

Desired effect

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

Answer 1

下面是一个通过使用伪元素然后根据需要进行绝对定位来实现此目的的示例方法。

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

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

#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 2

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 3

你总是可以使用伪元素吗？我在下面创建了一个 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>

你如何从边界画一条线？

3 个答案: