Фигуры с помощью css. Рисование фигур с помощью canvas. Будущее: CSS Исключения

И наконец, последний "ингредиент" развертывания - тестовая страница HTML. Она является точкой входа в содержимое Silverlight. Посетитель запрашивает страни­цу с помощью браузера. В изолированном решении Silverlight программа Visual Studio присваивает файлу тестовой страницы имя TestPage.html. В проекте, хостируемом страницей ASP.NET, тестовая страница получает имя на основе имени проекта. Чаще всего ее переименовывают, присвоив более информативное имя.

Тестовая страница HTML не содержит разметки или кода Silverlight. Вместо этого в ней с помощью кода JavaScript определяется область содержимого для надстройки Silverlight. По этой причине в браузере должна быть включена поддержка JavaScript, иначе браузер не сможет вывести содержимое Silverlight на экран. Ниже приведена сокращенная версия тестовой страницы HTML, в которой, однако, сохранены все суще­ственные компоненты.

.

TecroBaH страница проекта Silverlight

/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none">

"http://go.microsoft.com/fwlink/?LinkId=108181" alt="ycTaHOBMTe надстройку Microsoft Silverlight" style="border-style: none"/>

Ключевой компонент разметки - элемент , отмеченный полужирным шриф­том. Он представляет область содержимого Silverlight и содержит элемент , который загружает надстройку Silverlight. Элемент содержит четыре ключе­вых атрибута: data (идентификация объекта как области содержимого Silverlight), type (задание требуемой версии Silverlight, вторая или выше), height (высота области содер­жимого Silverlight) и width (ширина области содержимого).

Изменение тестовой страницы

При использовании сайта ASP.NET тестовая страница генерируется только один раз при создании сайта. В результате страницу HTML можно изменять, не беспокоясь о том, что изменения будут переопределены. При использовании изолированного проекта без сайта ASP.NET программа Visual Studio генерирует тестовую страни­цу при каждом запуске проекта. В результате этого любые изменения тестовой страницы отбрасываются. Если нужно настраивать тестовую страницу, легче всего создать ее для проекта вручную. Для этого выполните следующие операции.

1. Выполните проект, как минимум, один раз, чтобы Visual Studio сгенерировала тестовую страницу.

2. Щелкните на пиктограмме Show All Files (Показать все файлы), расположенной в верхней части окна Solution Explorer (Проводник решений).

3. В окне Solution Explorer разверните папку Bin\Debug.

4. Найдите файл TestPage. html, щелкните на нем правой кнопкой мыши и выберите команду Сору (Копиро­вать). Щелкните правой кнопкой мыши на папке BinXDebug и выберите команду Paste (Вставить). Копия будет служить пользовательской тестовой страницей. Щелкните правой кнопкой мыши на новом файле и выберите команду Rename (Переименовать). Введите произвольное имя.

5. Чтобы сделать пользовательскую тестовую страницу частью проекта, щелкните на файле правой кнопкой мыши и выберите команду Include in Project (Включить в проект).

6. Чтобы направить Visual Studio на пользовательскую тестовую страницу при выполнении проекта, щелкните на файле тестовой страницы правой кнопкой мыши и выберите команду Set As Start Page (Назначить стартовой страницей).

Примечание. Будьте осторожны при модификации, казалось бы, тривиальных компонентов тестовой страницы HTML. Некоторые из них необходимы для обеспечения совместимости с браузерами определенных типов. Например, запятая в конце атрибута data элемента обеспечивает совместимость с браузерами Firefox. Невидимый элемент в конце элемента позволяет выполнять навигацию в браузерах Safari. Фактически, вы можете модифицировать только значения ширины и высоты, список параметров и альтернативное содержимое.

Задание размеров области содержимого Silverlight

По умолчанию области содержимого Silverlight присваивается ширина и высота 100%, в результате чего содержимое занимает все доступное пространство в окне брау­зера. Размер области содержимого можно зафиксировать, жестко закодировав значения ширины и высоты в пикселях (обычно так не делают, поскольку такое ограничение слишком сильное). Можно также расположить элемент , содержащий область, в ограниченном месте страницы, например в ячейке таблицы, в другом элементе с фиксированными размерами или между другими элементами в многоколоноч­ной структуре.

Страница XAML может содержать жестко закодированные размеры, даже когда установленные по умолчанию размеры тестовой страницы ограничивают область содер­жимого Silverlight доступным пространством в окне браузера. Программа Visual Studio по умолчанию присваивает каждой новой странице Silverlight ширину 4 00рх и высо­ту ЗООрх путем установки атрибутов Height и Width корневого элемента UserControl. Если окно браузера больше, чем жестко закодированные размеры страницы, дополни­тельное пространство не используется. Если же оно меньше, часть страницы может оказаться за пределами видимой области окна.

Жесткое кодирование размеров полезно при создании сложных графических струк­тур с абсолютным позиционированием и минимальной гибкостью. В противном случае атрибуты Width и Height лучше удалить из открывающего дескриптора . Тогда размеры страницы совпадут с размерами области содержимого Silverlight, а раз­меры области содержимого будут определяться окном браузера. В результате содержи­мое Silverlight всегда будет вписываться в текущее доступное пространство.

Чтобы увидеть фактические размеры области содержимого Silverlight, добавьте в нее рамку с помощью простого правила в дескрипторе , например, следующим образом.

Расширяемые и масштабируемые страницы Silverlight рассматриваются в главе 3 при обсуждении структуры страницы.

От автора: Прямоугольник внутри прямоугольников: вот как всегда строились наши веб страницы. Мы долго пытались освободиться от этих ограничений, используя CSS для создания геометрических фигур, но эти фигуры никогда не влияли на контент, находящийся внутри оформленных элементов, или на то, как располагаются другие элементы на странице относительно оформленного.

Новая спецификация CSS для фигур меняет текущее положение вещей. Представленная Adobe в середине 2012 года, она ставит своей целью, дать веб дизайнерам возможность изменять поток контента внутри и вокруг относительно сложных фигур – что-то, чего мы не могли раньше добиться, даже используя JavaScript.

Например, обратите внимание как текст обтекает круглые картинки в следующем дизайне. Без Фигур, текст имел бы прямоугольную форму – выбрасывая утонченный прием, который поднимает дизайн на следующий уровень.

Обратите внимание как текст принимает округлую форму по краям тарелки в этом примере. Используя Фигуры СSS, мы можем создать похожий дизайн и для веб-страницы .

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

CSS Фигуры пока что поддерживаются только в Webkit Nightly и Chrome Canary, но их Модуль 1 Уровня достиг статуса кандидатской рекомендации, таким образом, свойства и синтаксис, определенные в спецификации являются достаточно стабильными. Пройдет немного времени до того, как и остальные браузеры начнут их поддерживать. Этот уровень концентрируется на тех свойствах Фигур, которые меняют поток контента вокруг фигуры. В частности, он концентрируется на свойстве shape-outside и связанных с ним.

В сочетании с другими последними возможностями, такими как Обрезка и Наложение маски , CSS фильтры и Коллажирование и Слияние , CSS Фигуры позволят нам создавать более сложный изысканный дизайн без необходимости прибегать к графическим редакторам, таким как Photoshop и InDesign.

Будущие уровни CSS Фигур также будут уделять внимание оформление контента внутри фигур. Например, на сегодняшний день, достаточно просто создать ромбическую фигуру на CSS: всего лишь перевернуть элемент на 45 градусов, а затем перевернуть контент внутри него в обратном направлении, чтобы он размещался на странице горизонтально. Но контент внутри ромба не будет принимать соответствующую форму, и всегда будет оставаться прямоугольным. К тому времени, когда свойство shape-inside будет реализовано, мы сможем сделать контент тоже ромбическим, создавая разметку, похожую на картинку ниже.

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

Чтобы сегодня использовать CSS Фигуры в Chrome Canary, вам необходимо включить флажок, делающий доступными экспериментальные возможности.

Вы можете применить фигуру к элементу, используя свойства Фигур. Вы передаете свойству фигуры функцию фигуры в качества значения. Функция фигуры – это тот участок кода, где вы передаете параметры, которые определяют фигуру, которую вы хотите применить к элементу.

Фигуры могут быть созданы с помощью одной из следующих функций:

Каждая фигура определяется набором точек. Некоторые функции принимают точки в качестве параметров; другие – принимают параметры смещения, но все они в конечном итоге отрисовывают фигуры на элементе как набор точек. Мы разберем параметры для каждой из этих функций на примерах.

Фигура также может быть определена из изображения с помощью извлечения альфа канала. Когда изображение передается свойству shape, браузер извлекает фигуру из изображения на основании значения shape-image-threshold. Фигура определяется пикселями, альфа значение которых выше заданного порога. Изображение должно иметь CORS совместимость . Если предоставленное по какой-то причине недоступно (например, оно не существует), тогда никакая фигура применена не будет.

Следующие фигуры принимают вышеописанные функции в качестве значений:

shape-outside: заставляет контент огибать фигуру (снаружи)

shape-inside: контент принимает форму фигуры изнутри

Вы можете использовать свойство shape-outside в сочетании с shape-margin для того, чтобы добавить внешний отступ вокруг фигуры, который отодвинет контент от фигуры, оставляя пространство между ними. Также как и shape-outside получает свойство shape-margin, shape-inside получает свойство shape-padding, что добавляет внутренний отступ.

Используя свойства фигуры или функции, объявляя элемент фигуры, можно обойтись всего одной строчкой CSS кода:

Element { shape-outside: circle(); /* контент будет обтекать круг, заданный элементу */ }

Element { shape-outside: url(path/to/image-with-shape.png); }

Но… Если вы применяете эту строчку CSS кода к элементу, фигура не будет применена к нему, если не будут соблюдены следующие условия:

Элемент должен быть плавающим. Будущие уровни CSS Фигур позволят нам определять фигуры для не плавающих элементов, но пока нет такой возможности.

Элементу должны быть заданы размеры. Высота и ширина, заданные элементу будут использованы для установления системы координат.

Как вы видели в функциях выше, фигуры определяются набором точек. Потому что точки имеют координаты, браузеру необходима система координат для того, чтобы знать где именно должна размещаться каждая точка на элементе. Таким образом, пример выше работал бы, если б имел следующее:

Element { float: left; height: 10em; width: 15em; shape-outside: circle(); }

Однако, задание определенных размеров элементу не влияет на его отзывчивость (мы поговорим об этом позднее). Так как каждая фигура определяется как набор точек, расположенных с использованием пары координат, изменение координат точки напрямую повлияет на созданную фигуру. Например, следующий рисунок показывает шестиугольник, который может быть создан с помощью функции polygon(). Фигура состоит их шести точек. Изменение горизонтальной координаты оранжевой точки изменит окончательную фигуру, а также повлияет на размещение контента внутри/снаружи любого элемента, к которому применяется фигура.

Если элемент плавает и выравнен по правому краю, а также к нему применена фигура, контент слева от него изменит свое расположение, когда будет изменена одна из координат оранжевой точки внутри функции polygon() .

CSS Фигуры определяются и создаются внутри справочного блока (reference box), где и происходит отрисовка фигуры. В добавок к высоте и ширине элемента, составные части блочной модели элемента — margin box, content box, padding box и border box – также являются справочниками для определения фигуры элемента.

По умолчанию, блок внешнего отступа (margin box) используется как справочный, таким образом, если элемент, к которому вы применяете фигуру уже имеет внешний отступ снизу, то фигура будет заканчиваться у края внешнего отступа, а не у границы. Если вы хотите использовать какие-то другие значения блочной модели, вы можете указать их вместе с функцией фигуры, которую вы передаете свойству фигуры:

shape-outside: circle(250px at 50% 50%) padding-box;

Ключевое слово padding-box в этом правиле определяет применение фигуры и ограничение в виде padding box (площадь внутреннего отступа). Функция circle() определяет круг, его размеры и размещение относительно элемента.

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

Используя CSS Фигуры, текст вокруг изображения пользователя обтекает по форму, вместо того, чтоб сохранять прямоугольную форму .

Мы будем использовать функцию circle() для того, чтобы применить круглую форму к изображению профиля, используя следующую разметку:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?

Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.

Вы можете спросить: «Почему мы не можем применить border-radius для округления картинки?» Ответ: свойство border-radius никак не влияет на расположение контента внутри и снаружи элемента, к которому оно применено. Оно влияет только на границы элемента или фон. Фон обрезается по скругленным углам, на этом все. Контент внутри элемента останется прямоугольным, и контент снаружи элемента будет вести себя также, будто элемент остается прямоугольным.

Мы собираемся использовать свойство border-radius для того, чтобы сделать изображение круглым – вот то, что мы делаем для того, чтобы округлить картинки или другие элементы на странице:

Без CSS Фигур текст видит картинку как квадратную и обтекает квадратную фигуру, а не круглую .

В браузере, который не поддерживает CSS Фигуры, контент вокруг круглого изображения будет располагаться, так будто оно не круглое. Именно таким образом это будет выглядеть в старых браузерах. Чтобы изменить обтекание контента вокруг определенной фигуры, используйте свойства фигуры.

img { float: left; width: 150px; height: 150px; border-radius: 50%; shape-outside: circle(); shape-margin: 15px; }

При помощи этого кода, текст сможет «увидеть» круглую фигуру, примененную к изображению, и будет обтекать его, как показано на первом скрин-шоте. (Вы можете посмотреть на результат .) В браузерах, не поддерживающих фигуры, это будет выглядеть так, как показано на втором изображении.

Вы можете использовать функцию circle() в чистом виде или передавать ей параметры. Вот ее официальный синтаксис:

circle() = circle([]? ? [ at < position > ] ? )

Вопросительные знаки показывают, что эти параметры опциональны и могут быть пропущены. Те параметры, которые вы пропускаете, будут принимать значения по умолчанию. Когда вы используете circle() как есть, вместо прямого указания положения, по умолчанию, центр круга будет находиться в центре элемента, к которому вы его применяете.

Вы можете задать радиус круга, используя любые единицы длины (px, em, pt, и т.д.) Также вы можете задать радиус с помощью параметров, используя closest-side или furthest-side, но closest-side – значение по умолчаниюe, что означает, что браузер будет принимать за радиус расстояние от центра элемента до ближайшей стороны, farthest-side использует расстояние от центра до дальней стороны.

shape-outside: circle(farthest-side at 25% 25%); /* определяет круг, чей радиус равняется половине наиболее длинной стороны, расположенный в точке с координатами 25% 25% в системе координат элемента */ shape-inside: circle(250px at 500px 300px); /* определяет круг, чей центр расположен в 500px горизонтально и 300px вертикально,с радиусом в 250px */

Функция ellipse() работает также как и circle(), с тем же набором значений, за исключением того, что вместо параметра радиуса, она принимает два: один радиус по оси-х, другой – по оси-у.

ellipse() = ellipse([{2}]? ? [ at < position > ] ? )

Функция inset() не имеет прямого отношения к кругу или эллипсу, она используется для создания прямоугольных форм внутри элемента. Так как элементы и так являются прямоугольными, нам она не нужна для создания прямоугольников. Вместо этого, inset() может помочь нам создавать прямоугольники со скругленными углами, так чтобы контент обтекал скругленные углы.

Функция inset() принимает от одного до четырех параметра смещения, которые определяют смещение относительно краев справочного блока, что определяет местонахождение прямоугольгика внутри элемента. Скругленные углы обозначаются точно таким же способом, как и border-radius, используя одно из четырех значений, в сочетании с ключевым словом round.

inset() = inset(offset{1,4} ?)

Следующий код создаст прямоугольник со скругленными углами на плавающем элементе.

Element { float: left; width: 250px; height: 150px; shape-outside: inset(0px round 100px) border-box; }

Последняя функция Фигур – это polygon(), которая определяет более сложные неоднозначные фигуры, используя любое количество точек. Функция принимает набор пар координат, где каждая пара определяет положение точки.

В следующем примере, плавающее изображение размещается у правого края, занимая всю высоту экрана и используя единицы окна просмотра. Мы хотим, чтобы текст слева обтекал песочные часы внутри изображения, и мы используем функцию polygon(), чтобы определить нестандартную фигуру для изображения.

CSS код для изображения выше выглядит следующим образом:

img.right { float: right; height: 100vh; width: calc(100vh + 100vh/4); shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); }

Вы можете задать координаты точек, определяющих фигуру в единицах длины или в процентах, как у меня. Этот код даст необходимый результат, но как вы видите, функция фигуры не влияет на оставшиеся части изображения за пределами заданной фигуры. Дело в том, что применение функции фигуры к элементу – будь то изображение или контейнер или что-то другое – не повлияет ни на что, кроме области обтекания контента. Фон, границы и все остальное останется неизменным.

Чтобы визуально представить созданный многоугольник, нам нужно «обрезать» части изображения за пределами фигуры. В этом нам поможет свойство clip-path из спецификации CSS Masking Module .

Свойство clip-path принимает те же функции фигуры и значения, что и свойство фигуры. Если мы передадим ту же многоугольную фигуру, которую мы использовали для свойства shape-outside, свойству clip-path, то оно обрежет часть изображения, находящуюся за пределами фигуры.

img.right { float: right; height: 100vh; width: calc(100vh + 100vh/4); shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); /* обрезка картинки по контуру фигуры */ clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%); }

Результат выглядит так:

Свойство clip-path пока поддерживается вместе с префиксами, т.е. оно будет работать в Хроме с добавлением префикса –webkit-. Вы можете посмотреть на демо .

Свойство clip-path является замечательным спутникам для свойства фигуры, так как оно помогает визуально представить созданные фигуры и обрезать части за пределами фигуры, так что возможно вы будете очень часто их использовать вместе.

Функция polygon() также принимает опциональное ключевое слово для заполнения, которое может быть либо nonzero либо evenodd. Оно определяет то, как будут вести себя пересекающиеся области внутри многоугольника. Ознакомьтесь со свойством SVG fill-rule для получения подробностей.

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

Фигура определяется пикселями, чье альфа значение выше определенного порога. Значение порога по умолчанию составляет о.о (полностью прозрачный), или вы можете задать его прямо с помощью свойства shape-image-threshold. Таким образом, любой непрозрачный пиксель может быть использован как часть фигуры, определяемой изображением.

Будущий уровень CSS Фигур может позволять переключаться на использования данных яркости изображения вместо альфа канала. Если это произойдет, shape-image-threshold будет расширен, чтобы включать порог или для яркости или для альфа канала, в зависимости от состояния переключателя.

Мы используем следующее изображение, чтобы определить фигуру элемента и заставить текст обтекать его:

Конечно же, если вы применили фон к элементу, фон будет необходимо обрезать за пределами заданной фигуры. Свойство mask-image (с соответствующими префиксами) из Модуля Масок, может помочь в этом, так как свойство clip-path не принимает значение альфа канала в качестве значения. Результат выглядит вот так:

Если вы создаете сложные фигуры, вам возможно будет удобно задавать фигуру с помощью картинки. Это позволит использовать альфа канал изображения в Photoshop, вместо того,чтобы задавать точки вручную.

Вам также будет удобно использовать изображение вместо функции фигуры, когда у вас много плавающих элементов или обасти исключения внутри элемента – потому что на данный момент нет возможности объявить несколько фигур одному элементу. Но если изображение содержит несколько областей, браузер извлечет эти области и использует их.

Могут ли CSS Фигуры подойти для отзывчивого дизайна? Текущая спецификация для shape-outside включает этот момент, потому что она позволяет задавать размеры элементу либо в процентах, либо в единицах длины, и точки определяющие фигуру (параметры функции фигуры) также могут быть заданы в процентах. Это означает, что элемент с заданным shape-outside может быть полностью отзывчивым, также как и любой плавающий элемент с размерами, заданными в процентах.

Свойство shape-inside пока что не отзывчивое, но это потому что, оно было сдвинуто в Модуль 2 Уровня. Многие из его текущих ограничений уйдут на следующем уровне.

Создание сложных фигур с использованием функций может оказаться трудоемкой задачей, особенно если вы создаете фигуру с множеством точек и координат, используя polygon(). К счастью, команда веб-платформы Адобе работает над производством интерактивных инструментов, чтобы сделать этот процесс гораздо легче. Bear Travis создал коллекцию Инструментов для создания Фигур , которая позволяет нам визуально создавать многоугольные фигуры. Инструмент генерирует функцию фигуры. Это может быть полезным, но имеет свои ограничения, если вы ходите создать фигуру на основе определенного изображения, потому что инструмент такой возможности не предоставляет.

Более продвинутый и интерактивный инструмент был разработан командой веб платформы Adobe. Инструмент, был недавно выпущен в качестве расширения для бесплатного редактора Brackets . Он позволяет визуализировать и редактировать фигуры прямо в браузере, и имеет возможность онлайн превью, которая обновляет значения фигуры в таблице стилей, когда вы меняете их на странице. Это дает мгновенную визуальную обратную связь вашим изменениям, позволяя увидеть как фигуры взаимодействуют с другими элементами на странице.

Редактирование многоугольной фигуры прямо в браузере, используя режим превью в Brackets. Запись экрана сделана Razvan Caliman .

Этот инструмент станет незаменимым, так как он облегчает созлание, редактирование и дебаггинг фигур. Razvan Caliman , которая объясняет как вызвать редактор Фигур в Brackets и начать его использовать.

Спецификация CSS Фигур была спецификацией, посвященной CSS Фигурам и Исключениям, но она была разделена. В то время как CSS Фигура определяет свойства shape-inside и shape-outside, CSS Исключения определяют свойства, которые заставляют контент обтекать не плавающие элементы, например, имеющие абсолютное позиционирование. Они делают возможным обтекание контентом целой фигуры с разных сторон, как показано на изображении ниже.

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

Текущая спецификация CSS Фигур – это всего лишь первый шаг. Вскоре, новые возможности дадут нам больше контроля надо созданием и обтекающим контентом, таким образом, нам будет проще превращать макеты в живой дизайн с помощью всего нескольких строчек кода. На сегодняшний день редакторы спецификаций сосредоточены на завершении shape-outside, и возможно вы увидите поддержку CSS Фигур большим количеством браузеров к концу 2014 года.

Вы можете использовать Фигуры уже сегодня как часть стратегии progressive enhancement, зная, что у них есть приемлемая замена в не поддерживающих браузерах. Я недавно начала применять их на своем сайте и замена выглядит вполне приемлемой. Для более сложного дизайна, вы можете использовать скрипт для проверки поддержки браузером, и предоставлять любую замену, если нет поддержки. Вы также можете использовать тесты Modernizr с помощью этого скрипта , чтобы проверить поддерживается ли свойство shape-outside, или загрузить собственную сборку, включающую этот тест.

CSS Фигуры позволяют нам создать еще один мостик между полиграфией и веб дизайном. Примеры в этой статье простые, но они должны давать вам основу для создания дизайна по сложности сравнимого с журналом или постером, не беспокоясь о том, сможете ли вы воссоздать его на экране. Чтобы вы ни изучали – от не прямоугольных разметок до анимации Фигур – сейчас время экспериментов.

Влад Мержевич

На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место. Также треугольники выполняют декоративные функции, делая блоки, где они применяются, более изящными и современными. На рис. 1 показан пример использования треугольника в дизайне.

Рис. 1. Треугольники в веб-дизайне

Напрямую сделать треугольник средствами CSS нельзя, поэтому доступны два метода, позволяющих его добавить - через border и transform .

Хотя границы, создаваемые через свойство border , напрямую не имеют отношения к треугольникам, именно border используется для этого наиболее часто. Если задать нулевую ширину и высоту элемента, а также установить достаточно толстую границу, то мы увидим набор из четырёх треугольников (рис. 2). Для наглядности границы на всех сторонах установлены разного цвета.

Рис. 2. Добавление border к элементу

Оставляя только нужную границу, а остальные делая прозрачными, мы получим треугольник нужного цвета (рис. 3).

Рис. 3. Элемент с прозрачными границами

В примере 1 показано добавление треугольника к блоку через псевдоэлемент ::after .

Пример 1. Блок с треугольником

Треугольник .block { background: green; border-radius: 10px; padding: 20px; position: relative; color: #fff; } .block::after { content: ""; position: absolute; /* Абсолютное позиционирование */ left: 20px; bottom: -20px; /* Положение треугольника */ border: 10px solid transparent; /* Прозрачные границы */ border-top: 10px solid green; /* Добавляем треугольник */ }

Для абсолютно позиционированных элементов нулевую ширину и высоту указывать не обязательно.

За счёт комбинирования границ можно получить ещё четыре вида треугольников, что в сочетании с уже упомянутыми даёт нам восемь вариантов. Их вид и требуемый код приведён в табл. 1.

Из таблицы видно, что невидимые границы занимают место, учитывайте это при позиционировании элементов. Стиль, также, необходимо дополнить нулевой шириной и высотой или воспользоваться свойством position, как это делалось в примере 1.

Треугольник можно делать и другой формы, если задать разную толщину границ. Так, код создания блока, показанного на рис. 4, приведён в примере 2.

Рис. 4. Острый треугольник

Пример 2. Острый треугольник

Треугольник .block { background: green; position: relative; width: 100px; height: 50px; } .block::after { content: ""; position: absolute; right: -30px; top: 15px; border: 10px solid transparent; border-left: 20px solid green; }

С помощью border мы получаем сплошные цветные треугольники, для создания рамки показанной на рис. 5 приходится идти на хитрость и накладывать один элемент поверх другого с небольшим смещением. Опять же здесь нам помогут псевдоэлементы :before и :after (пример 3).

Рис. 5. Рамка с уголком

Пример 3. Наложение треугольников

Треугольник .block { border: 1px solid green; border-radius: 10px; padding: 20px; position: relative; } .block::before, .block::after { content: ""; position: absolute; left: 20px; bottom: -20px; border: 10px solid transparent; border-top: 10px solid green; } .block::after { border-top: 10px solid white; bottom: -19px; } Глокая куздра штеко будланула бокра и кудрячит бокрёнка.

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

С помощью трансформации мы можем повернуть квадратный элемент на 45º и получить из него ромб. Это ещё не треугольник как таковой, поэтому нужную нам выступающую часть оставляем на виду, а остальное прячем за другим элементом (пример 4).

Пример 3. Трансформация

Треугольник .block { border: 1px solid green; border-radius: 10px; padding: 20px; position: relative; background: green; color: #fff; box-shadow: 0 0 7px #000; /* Добавляем тень для блока */ } .block::after, .block::before { content: ""; position: absolute; background: green; left: 20px; bottom: -11px; width: 20px; height: 20px; box-shadow: 0 0 7px #000; /* Добавляем тень для уголка */ z-index: -1; /* Прячем за основным блоком */ transform: rotate(45deg); /* Поворачиваем на 45º */ -webkit-transform: rotate(45deg); } .block::before { z-index: 1; /* Накладываем поверх, чтобы скрыть следы тени */ box-shadow: none; /* Прячем тень */ } Глокая куздра штеко будланула бокра и кудрячит бокрёнка.

Результат данного примера показан на рис. 6.

Рис. 6. Треугольник с тенью

Мы можем погрузиться в детали того, как рисовать в canvas. К концу этой статьи, Вы научитесь рисовать прямоугольники, треугольники, линии, дуги и кривые, при условии что Вы хорошо знакомы с основными геометрическими фигурами. Работа с путями весьма важна, когда рисуете объекты на canvas и мы увидим как это может быть сделано.

Перед тем, как мы начнем рисовать, нам нужно поговорить о сетке canvas или координатной плоскости . Наш HTML каркас из предыдущей страницы включал в себя элемент canvas 150 пикселей в ширину и 150 пикселей в высоту. Справа можно увидеть этот canvas с сеткой , накладываемой по умолчанию . Обычно 1 единица на сетке соответствует 1 пикселю на canvas. Начало координат этой сетки расположено в верхнем левом углу в координате ( 0,0) . Все элементы размещены относительно этого начала . Так им образом, положение верхнего левого угла синего квадрата составляет х пикселей слева и у пикселей сверху, на координате (х , у) . Позже в этом уроке мы увидим, как можно перевести начало координат в другое место , вращать сетку и даже масштабировать ее , но сейчас мы будем придерживаться настроек сетки по умолчанию.