테두리에서 선을 그리려면 어떻게해야합니까?

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

가 아래 필요 절대적 위치이어서 가상 요소를 사용하여 달성 한 샘플링 방법이다.

그래서도를 margin-right가 (난 그냥 그림에 대한 대답 50 픽셀하는 문제의 20 픽셀에서 그것을 수정했다) 50 픽셀이 + 상자의 테두리 원 내부에 몇 픽셀이며, 때문에 left: -58px에 대한 이유는 고려해야 만했다. 라인의 width은 left 값보다 작아서 pointerDiv 직전의 라인 끝을 만듭니다.

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

항상 의사 요소를 사용할 수 있습니까? I은 기본 모형 아래 만들었다 :

.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

당신은 라인 (일부 브라우저와 호환되지 않을 수 있습니다)

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