Оформление SVG-фигур / Вид сгибов [10/20]
×

Вид сгибов [10/20]

Свойство stroke-linejoin позволяет управлять видом обводки на сгибах линий.

Аналогично прошлому заданию мы добавили «воображаемую» светлую линию в примеры. Итак, возможные значения свойства stroke-linejoin:

1) miter — значение по умолчанию. Обводка в месте сгиба линии никак не видоизменяется.

2) round. Обводка в месте сгиба линии равномерно закругляется.

3) bevel. Обводка в месте сгиба линии складывается как лента.

В CSS внешним видом обводки на сгибах линий можно управлять с помощью аналогичного свойства stroke-linejoin.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<svg width="300" height="400"> <polyline points="40,150 150,40 260,150" fill="none" stroke-width="40" stroke="tomato" stroke-linejoin="miter"/> <polyline points="40,260 150,150 260,260" fill="none" stroke-width="40" stroke="gold"/> <polyline class="shape-linejoin" points="40,370 150,260 260,370" fill="none" stroke-width="40" stroke="lightseagreen"/> </svg>
CSS
svg { border: 1px solid #dddddd; }
HTML Academy
  1. Задайте второй линии атрибут stroke-linejoin="round".
  2. В CSS третьей линии задайте свойство stroke-linejoin со значением bevel.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #11, который стартует 22 мая.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.