Page 64 - Сила CSS3 Освой новейший стандарт

64 • Глава 2. Облачка с текстом

border-style: solid;
border-color: transparent #000 transparent transparent;
}

Если бы все четыре отрезка рамки были одинаковой ширины, то у нас получился бы
довольно толстый треугольник, как на рис. 2.7. Чтобы сделать его длиннее и уже, мы
установили для верхнего и нижнего отрезков ширину 10 пикселов, а левый отрезок
рамки сделали невидимым, т. е. нулевой ширины. Правый отрезок рамки — тот,
что в результате превратился в указывающий влево треугольник — крупнее всех,
его ширина составляет 20 пикселов. Все отрезки рамки, за исключением правого,
прозрачные; для правого отрезка я временно выбрала черный цвет — так удобнее
будет корректировать его местоположение (рис. 2.9).
Сейчас треугольник выводится сразу после содержимого blockquote — но хвостик
облачка с текстом должен находиться совсем не там. Исправить местоположение
можно, прибегнув к абсолютному позиционированию. Во-первых, добавьте к пра-
вилу blockquote еще одну строку, position: relative;. Таким образом, вы опре-
делите ориентир для абсолютного позиционирования элемента:
blockquote {
position: relative;
margin: 0 0 0 112px;
padding: 10px 15px 5px 15px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
border-top: 1px solid #fff;
background-color: #A6DADC;
word-wrap: break-word;
}

Теперь добавьте данные абсолютного позиционирования для генерируемого со-
держимого, а также укажите значения top и left:

blockquote:after {
content: "\00a0";
display: block;
position: absolute;
top: 20px;
left: -20px;
width: 0;
height: 0;
border-width: 10px 20px 10px 0;
border-style: solid;
border-color: transparent #000 transparent transparent;
}

Значение top может быть любым; удостоверьтесь только, что оно не меньше зна-
чения border-radius — это нужно, чтобы треугольник прикреплялся к прямой

www.trk.kg