Как вы рисуете линию с границы?

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

Ниже является одним из методов выборки, чтобы достичь этого, используя псевдо-элемент, а затем позиционировать его абсолютно по мере необходимости.

Причина left: -58px потому, что margin-right (я изменил его от 20px в вопросе 50px в ответ только для иллюстрации) является 50px + граница коробки несколько точек внутри круга и так, что также необходимо было рассмотреть. Строка 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

Вы всегда можете использовать псевдоэлементы? Я создал базовый макет ниже:

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