如何从边框画一条线？ [英] How do you draw a line from a border?

问题描述

我目前有这个HTML：

  #circle {background-color ： 橙子; 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 here< / div& code> 
 

我想达到这个效果：

基本上，从边界到点到元素的线，我可以填充解释数字的文本。我如何做到这一点？

解决方案

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

left：-58px 的原因是因为 margin-right （我已经修改它从20px的问题到50px的答案只是为了说明）是50px +框的边框是一个几个px内的圆，所以也必须考虑。该行的 width 小于 left 值，以使行结束于<$请注意，我还添加了一个 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;位置：相对; height：40px; line-height：40px;}＃pointerDiv：before {content：''; position：absolute; border：1px solid black; top：50％; left：-58px; width：55px;}  

 < div id = >< span id ='innerContent'> 123< / span>< / div>< div id ='pointerDiv'> text here< / div>< div id =circle> < span id ='innerContent'> 123< / span>< / div>< div id ='pointerDiv'>一些冗长的文字在这里< / div>< div id =circle> ; span id ='innerContent'> 123< / span>< / div>< div id ='pointerDiv'> short txt< / div>  

/ div>

I currently have this 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>

I'm trying to achieve this effect:

Basically, a line that goes from the border to point to an element I can fill with text that explains the number. How do I do this?

解决方案

The below is one sample method to achieve this by using a pseudo-element and then positioning it absolutely as required.

The reason for the left: -58px is because the margin-right (I had modified it from the 20px in question to 50px in answer just for illustration) is 50px + the border of the box is a few px inside the circle and so that also had to be considered. The width of the line is made smaller than the left value so as to make the line end just before the pointerDiv.

Note that I have also added a clear: both to the #circle just in-case you want to add more such entries one below the other. If not required, it can be removed.

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

这篇关于如何从边框画一条线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！