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

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

посмотреть на угол поля, то вы увидите, что у отрезков, составляющих его рамку,
края скошены (рис. 2.5). Уменьшите значения width и height для этого поля до
нуля, выберите для всех отрезков рамки бˆольшее значение толщины и разные цве-
та, и у вас получится фигура из составленных вместе четырех треугольников, ука-
зывающих в разных направлениях (рис. 2.6).

Рис. 2.5. Выбрав для верхнего отрезка Рис. 2.6. Когда ширина и высота поля
рамки другой цвет, легко равны нулю, отрезки рамки
увидеть, что его концы скошены превращаются в треугольники

Далее представлен код HTML и CSS, определя-
Помните, что если в коде CSS од- ющий фигуру на рис. 2.6:
ному свойству соответствуют сра-
зу четыре значения (как свойству <div class="triangles"></div>
border-color в приведенном фраг-
менте кода), то первое описывает .triangles {
верхний элемент, второе — пра- border-color: red green blue orange;
вый, третье — нижний, а четвер- border-style: solid;
тое — левый. Вы обходите фигу- border-width: 20px;
width: 0;
ру по часовой стрелке, начиная height: 0;
сверху. }

Но что произойдет, если верхний, левый и нижний отрезки рамки сделать не цвет-
ными, а прозрачными? Тогда на странице мы увидим только правый отрезок, ко-
торый будет выглядеть как треугольник, указывающий влево (рис. 2.7):

<div class="triangle-left"></div>

.triangle-left {
border-color: transparent green
Рис. 2.7. Все отрезки рамки, transparent transparent;
за исключением border-style: solid;
правого, прозрачные; border-width: 20px;
правый отрезок width: 0;
выглядит как height: 0;
}
треугольник

Таким образом, для того чтобы создать треугольник с помощью кода CSS, вам нуж-
но уменьшить ширину и высоту элемента до нуля, добавить толстую рамку и все

www.trk.kg