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

Графические эффекты без графики • 65

части окантовки поля, прямо под скругленным углом. Значение left должно быть
отрицательным, чтобы треугольник выдавался влево, и совпадать с шириной тре-
угольника. Ширина нашего треугольника — 20 пикселов (вспомните, это ширина
правого отрезка рамки), поэтому значение left равно -20px. Таким образом, тре-
угольник отображается слева от поля комментария вплотную к нему (рис. 2.10).

Рис. 2.9. Правый отрезок рамки — Рис. 2.10. Абсолютное позиционирование
черного цвета. Он выглядит, помогает поместить
как указывающий влево черный треугольник в точности туда,
треугольник где мы хотим его видеть

Если комментарий короткий, то его поле получается достаточно узким, и тогда
хвостик некрасиво свисает, как у второго комментария на рис. 2.10. Для того чтобы
исправить этот косметический недостаток, добавьте к правилу blockquote строку
min-height: 42px;.
blockquote {
position: relative;
min-height: 42px;
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;
}

Теперь, когда треугольник выводится рядом с содержимым blockquote, а не поверх
него, можно поменять цвет хвостика, для того чтобы он составлял единое целое
с облачком:
blockquote:after {
content: "\00a0";
display: block;
position: absolute;

www.trk.kg