У меня есть 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;;
}
Я пытаюсь выяснить, как добавить границу к стрелке с помощью: перед псевдоэлементом, как здесь, здесь, но я не могу понять, как изменить направление стрелки для разных элементов. Может ли кто-нибудь помочь или предложить ссылку на демонстрацию многонаправленных подсказок со стрелками и границами?
Основной принцип заключается в том, что после того, как вы разместили стрелку границы, используя :after
псевдоэлемента, вы помещаете другую, чуть меньшую стрелку сверху с помощью :before
псевдоэлементом.
Укладка выполняется с использованием значения z-index.
Каждая стрелка требует позиционирования с абсолютными значениями (и некоторой отрицательной маркой) в зависимости от того, где она должна быть.
Для верхней стрелки с границей:
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) (с некоторыми небольшими комментариями) в прилагаемом...