ru af en-us pl be tr

Категория CSS  

Создание треугольников из рамок CSS3


2012-11-07 12:25:00

Создание треугольников из рамок CSS3


 

Благодаря скругленным углам поля комментариев стали гораздо больше похожи 

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

указателя или стрелки (обычно называемой «хвостиком»), связанной с автором 

этой прямой речи. Для добавления хвостика никакие изображения не требуются. 

Более того, это можно сделать, даже не прибегая к возможностям CSS3, — данный 

метод основывается на свойствах и селекторах из CSS2.

 

Создание треугольников из рамок

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

очень легко создать из обычных рамок с помощью чистого CSS. Если внимательно 

посмотреть на угол поля, то вы увидите, что у отрезков, составляющих его рамку, 

края скошены (рис. 2.5). Уменьшите значения width и height для этого поля до 

нуля, выберите для всех отрезков рамки бˆольшее значение толщины и разные цве-

та, и у вас получится фигура из составленных вместе четырех треугольников, ука-

зывающих в разных направлениях (рис. 2.6).

 

Создание треугольников из рамок CSS3

 

Помните, что если в коде CSS од-

ному свойству соответствуют сра-

зу четыре значения (как свойству 

border-color в приведенном фраг-

менте кода), то первое описывает 

верхний элемент, второе — пра-

вый, третье — нижний, а четвер-

тое — левый. Вы обходите фигу-

ру по часовой стрелке, начиная 

сверху.

 

Далее представлен код HTML и CSS, определя-

ющий фигуру на рис. 2.6:

<div class="triangles"></div>

.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 

transparent transparent;

    border-style: solid;

    border-width: 20px;

    width: 0;

    height: 0;

}

 

 Все отрезки рамки, за исключением правого, прозрачные; правый отрезок выглядит как треугольник

 

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

но уменьшить ширину и высоту элемента до нуля, добавить толстую рамку и все 

отрезки рамки, за исключением одного, сделать прозрачными. Степень остроты 

угла можно варьировать, устанавливая разные значения толщины для разных от-

резков рамки.

Создание хвостика

Теперь вы знаете, как сделать треугольник без помощи изображений. Давайте до-

бавим треугольник слева от поля комментария так, чтобы он указывал на аватар 

пользователя. Для этого можно было бы вложить блок span или div внутрь каждого 

комментария, а затем трансформировать этот элемент в наш треугольник. Однако я 

предлагаю не менять код HTML и использовать для создания нужного нам элемента 

содержимое, генерируемое CSS.

Генерируемое содержимое (generated content) — это метод CSS 2.1, позволяющий 

делать так, чтобы содержимое из CSS появлялось в коде HTML. Его удобно приме-

нять для добавления элементов, которые вам не хочется программировать вручную 

в коде HTML, таких как порядковые номера в заголовках или значки после ссылок. 

Однако его не следует применять для важного содержимого, отсутствие которого 

исказит страницу или испортит впечатление пользователя, браузер которого не 

может загрузить файл CSS.

Для создания генерируемого содержимого необходимо указать, куда оно должно 

быть вставлено; для этого используются псевдоэлементы ::before и ::after (кото-

рые также можно записывать как :before и :after). Свойство content указывает 

на то, какое содержимое вставляется в код HTML.




купить матрас 160x200

Похожие статьи

 Отступы(margin) CSS
 Работа с браузерами, не поддерживающими функциональность CSS3
 Создание овалов и окружностей с помощью свойства bordEr-radIuS CSS3
 Что такое CSS3?
 


Сайт является частным собранием материалов и представляет собой любительский информационно-образовательный ресурс. Вся информация получена из открытых источников. Администрация не претендует на авторство использованных материалов. Все права принадлежат их правообладателям