Увидел интересную идею для Tooltip. Её отличие от других состоит в том, что боковые полосы стрелки заходят в тело образовывая две прозрачные полосы. Не могу понять, как осуществить эти вырезы.
Мой код:
.tooltip {
display: inline-block;
position: relative;
padding: 10px;
background-color: #0391fd;
color: white;
border-radius: 6px;
}
.tooltip:before {
display: block;
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #0391fd;
transform: translateX(-50%);
}
Как сделать прозрачные вырезы?
Уточнение: в Tooltip должен вставляться текст. При этом тело Tooltip должно быть резиновым, т.е. размер Tooltip должен изменяться под текст внутри
Ответ
CSS решение
Это можно реализовать обычной версткой. Без дополнительной графики, кроссбраузерно.
.back {
width: 850px;
height: 640px;
background: url(http://orig09.deviantart.net/5063/f/2012/219/c/4/inari_fox__ivory_by_santani-d5a465m.jpg);
}
.tooltip {
min-width: 50px;
max-width: 300px;
/* Стили ниже только для демонстрации. Можно удалить. */
display: inline-block;
vertical-align: top;
margin: 10px;
}
.tooltip .content {
border-radius: 10px 10px 0 0;
background: #3f51b5;
padding: 10px;
color: #fff;
}
.tooltip .footer {
position: relative;
display: flex;
}
.tooltip .footer .left {
flex: 1 1 auto;
position: relative;
border-bottom: 10px solid #3f51b5;
border-right: 10px solid transparent;
border-bottom-left-radius: 10px;
}
.tooltip .footer .circle {
position: absolute;
top: -1px;
width: 3px;
height: 3px;
border-radius: 50%;
border-top: 1px solid #3f51b5;
}
.tooltip .footer .circle:after {
content: '';
position: absolute;
width: 0;
height: 0;
}
.tooltip .footer .left .circle {
right: -5px;
border-left: 1px solid #3f51b5;
}
.tooltip .footer .left .circle:after {
top: -3px;
left: -3px;
border-right: 3px solid #3f51b5;
border-top: 2px solid transparent;
border-bottom: 3px solid transparent;
transform: rotate(45deg);
}
.tooltip .footer .right {
flex: 1 1 auto;
position: relative;
border-bottom: 10px solid #3f51b5;
border-left: 10px solid transparent;
border-bottom-right-radius: 10px;
}
.tooltip .footer .right .circle {
left: -5px;
border-right: 1px solid #3f51b5;
}
.tooltip .footer .right .circle:after {
top: -3px;
right: -3px;
border-left: 3px solid #3f51b5;
border-top: 3px solid transparent;
border-bottom: 2px solid transparent;
transform: rotate(-45deg);
}
.tooltip .footer .center {
flex: 0 0 28px;
position: relative;
}
.tooltip .footer .center:after {
content: '';
position: absolute;
left: -6px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-top: 20px solid #3f51b5;
border-right: 20px solid transparent;
}
В данном примере используется flex-box в футере. Если очень нужно поддерживать IE <= 9, можно заменить на классический аналог.
Комментариев нет:
Отправить комментарий