다음과 같이 : after 의사 요소로 화살표가있는 4 방향 도구 설명이 있습니다. (JSFiddle 참조)
<div class="background">
<div class="tooltip tooltip-right">
<i>i</i>
<div><h4>Achtung!</h4>
<p>Here is the info for section one</p></div>
</div>
.tooltip div {
display:none;
color:#000;
border: 3px solid rgba(117, 175, 67, 0.4);
background:#FFF;
padding:15px;
width: 250px;
z-index: 99;
}
.tooltip-right div {
left: 180%;
top: -80%;
}
.tooltip div:after {
position:absolute;
content: "";
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: #FFFFFF transparent transparent transparent;
bottom:-20px;
}
.tooltip-right div:after {
left:-20px;
top:20px;
border-color: transparent #FFFFFF transparent transparent;;
}
이 데모 에서와 같이 : before 의사 요소를 사용하여 화살표에 테두리를 추가하는 방법을 연구하고 있지만 다른 요소의 화살표 방향을 변경하는 방법을 알아낼 수 없습니다. 누구든지 도움을 주거나 화살표와 테두리가있는 다 방향 툴팁의 데모 링크를 제공 할 수 있습니까?
기본 원칙은 :after
의사 요소를 사용하여 테두리 화살표를 배치 한 후에는 의사 요소와 함께 약간 더 작은 다른 화살표를 위에 배치하는 것 :before
입니다.
누적은 Z- 색인 값으로 수행됩니다.
각 화살표는 위치에 따라 절대 값 (및 일부 음수 여백)으로 배치해야합니다.
테두리가있는 위쪽 화살표의 경우 :
HTML
<div class="tooltip top">
<p>Tooltip Text</p>
</div>
CSS
.tooltip {
display:inline-block;
vertical-align:top;
height:50px;
line-height:50px; /* as per div height */
margin:25px;
border:2px solid grey;
width:250px;
text-align:center;
position:relative; /* positioning context */
}
.tooltip:before,
.tooltip:after { /*applies to all arrows */
position:absolute;
content:"";
}
.tooltip:after {
/* the is going to be the extra border */
border:12px solid transparent;
}
.tooltip:before {
/* the is going to be the inside of the arrow */
border:10px solid transparent; /* less than outside */
}
/* Lets do the top arrow first */
.top:after {
/* positioning */
left:50%;
margin-left:-6px; /* 50% of border */
top:-24px; /* 2x border */
border-bottom-color:grey; /* as div border */
}
.top:before {
/* positioning */
left:50%;
margin-left:-5px; /* 50% of border */
top:-20px; /* 2x border */
border-bottom-color:white; /* as div background */
z-index:5; /* put it on top */
}
나는 첨부 된 화살표 (TRBL) (작은 주석과 함께)를 완료했습니다 ...
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다