По умолчаниюСветлая версия
↑ перейти к списку статей

Продолжающийся фон в тултипе

Эта статья, скорее, идет в дополнение к предыдущей.
Совсем недавно был задан интересный вопрос: как сделать, чтобы фон(неоднородный) продолжался в стрелке тултипа?

Я вопрос решил с помощью трансформов из CSS3.

Создаем один див с такими стилями:

.parent{
position:relative;
display:inline-block;
padding:30px;
margin:50px;
background:url(image.jpg);
overflow:hidden;
}

Затем подвешиваем к нему два псевдоэлемента. Это будут два блока, которые находятся «внизу» родителя и перекрывают его нижнюю часть.

.parent:before, .parent:after{
content:'';
position:absolute;
background:#fff;
bottom:0px;
height:7px;
width:50%;
}

Затем наклоняем их в разные стороны и в результате получаем треугольник в центре:

.parent:before{
left:-2px;
-webkit-transform:skewX(30deg);
-moz-transform:skewX(30deg) translateY(1px);
-ms-transform:skewX(30deg);
-o-transform:skewX(30deg);
transform:skewX(30deg);
}

.parent:after{
right:-2px;
-webkit-transform:skewX(-30deg);
-moz-transform:skewX(-30deg) translateY(1px);
-ms-transform:skewX(-30deg);
-o-transform:skewX(-30deg);
transform:skewX(-30deg);
}

В итоге мы получим блок со стрелкой внизу, фон которой продолжает фон основного блока независимо от размеров и расположения.

Данный способ отлично будет работать с однородным фоном у подложки, что одновременно является его единственным недостатком.

Пример и код можно посмотреть здесь.

 

Кнопки для сайта

Комментарии запрещены.