проблема
Зрізання кутів - це не тільки швидкий спосіб досягти мети, але і популярний варіант стилізації як в друкованому дизайні, так і в веб-дизайні. Найчастіше він має на увазі обрізання одного або декількох куточків контейнера під кутом 45 °. Останнім часом, у зв'язку з тим, що скевоморфізм почав здавати позиції плоскому дизайну, цей ефект користується особливою популярністю. Коли кути зрізаються тільки з одного боку і кожен з них займає 50% висоти елемента, це створює фігуру в формі стрілки, що також часто використовується в оформленні кнопок і елементів навігації типу «хлібні крихти».
Однак в CSS все ще недостатньо інструментів для створення цього ефекту за допомогою простих і зрозумілих однорядкових рішень. Через це багато розробників схиляються до використання фонових зображень: або закривають зрізані кути трикутниками (на одноколірному тлі), або створюють весь фон за допомогою одного або декількох зображень, де кути вже зрізано. Очевидно, що такі методи абсолютно негнучкі, вони складні в супроводі і збільшують час очікування внаслідок додаткових HTTP-запитів і загального розміру файлів веб-сайту.
Приклад веб-сайту, де зрізаний кут (нижній лівий у напівпрозорого поля Find Book) відмінно вписується в дизайн
Одне можливе рішення пропонують нам всемогутні градієнти CSS. Припустимо, що нам потрібно тільки один зрізаний кут, скажімо, нижній правий. Трюк в тому, щоб скористатися здатністю градієнтів приймати напрямок кута (наприклад, 45deg) і позиції кордонів переходу кольору в абсолютних значеннях, які не змінюються при зміні габаритних розмірів елемента, якому належить фон. З вищесказаного випливає, що нам буде достатньо одного лінійного градієнта. Ми додамо прозорий кордон переходу кольору для створення зрізаного кута і ще одну кордон переходу кольору в тій же позиції, але вже з кольором, відповідним фону. Код CSS буде наступним (для кута розміром 15px):
Просто, чи не так? Результат ви бачите на малюнку.
background: # 58a;
background: linear-gradient (-45deg, transparent 15px, # 58a 0), linear-gradient (45deg, transparent 15px, # 655 0);
Однак, це не працює. За замовчуванням обидва градієнта займають всю площу елемента, так що вони заступають один одного. Ми повинні зменшити їх, обмеживши кожен з них половиною елемента за допомогою background-size:
background: # 58a;
background: linear-gradient (-45deg, transparent 15px, # 58a 0) right, linear-gradient (45deg, transparent 15px, # 655 0) left;
background-size: 50% 100%;
Результат ви можете бачити на малюнку.
Незважаючи на те що ми застосували background-size. градієнти все одно перекривають один одного. Причина в тому, що ми забули вимкнути background-repeat, тому кожен з фонів повторюється двічі. Отже, один з фонів все так же заступає інший, але на цей раз за рахунок повторення. Нова версія коду виглядає так:
background: # 58a;
background: linear-gradient (-45deg, transparent 15px, # 58a 0) right, linear-gradient (45deg, transparent 15px, # 655 0) left;
background-size: 50% 100%;
background-repeat: no-repeat;
Результат ви можете побачити на малюнку і переконатися, що він - нарешті! - працює! Ви напевно вже здогадалися, як застосувати цей ефект до всіх чотирьох кутах. Вам будуть потрібні чотири градієнта і код, подібний наступного:
background: # 58a;
background: linear-gradient (135deg, transparent 15px, # 58a 0) top left,
linear-gradient (-135deg, transparent 15px, # 655 0) top right,
linear-gradient (-45deg, transparent 15px, # 58a 0) bottom right,
ПОРАДА
Ми використовували різні кольори (# 58a і # 655) для спрощення налагодження. На практиці обидва градієнта будуть одного і того ж кольору.
Але проблема попереднього коду в тому, що він важко піддається супроводу. Він вимагає внести п'ять правок для зміни фонового кольору і чотири для зміни величини кута. Домішка, створена за допомогою препроцесора, могла б скоротити кількість повторень. Ось як цей код буде виглядати в SCSS:
SCSS
@mixin beveled-corners ($ bg,
$ Tl: 0, $ tr: $ tl, $ br: $ tl, $ bl: $ tr)
background: $ bg;
background:
linear-gradient (135deg, transparent $ tl, $ bg 0)
top left,
linear-gradient (225deg, transparent $ tr, $ bg 0)
top right,
linear-gradient (-45deg, transparent $ br, $ bg 0)
bottom right,
linear-gradient (45deg, transparent $ bl, $ bg 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
>
Викривлені зрізані кути
radial-gradient (circle at top right, transparent 15px, # 58a 0) top right,
radial-gradient (circle at bottom right, transparent 15px, # 58a 0) bottom right,
radial-gradient (circle at bottom left, transparent 15px, # 58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
Так само як і в попередній техніці, розміром кута можна управляти за допомогою позицій кордонів переходу кольору, а домішка здатна і цей код зробити більш придатним для подальшого супроводу.
Рішення зі строковим SVG і border-image
Зверніть увагу, що розмір кроку нарізки дорівнює 1. Це не означає 1 піксель; фактичний розмір визначається системою координат SVG-файлу (тому-то у нас і відсутні одиниці виміру). Якби ми використовували відсотки, то нам довелося б апроксимувати 1/3 зображення дробовим значенням, начебто 33.34%. Вдаватися до приблизними значенням завжди ризиковано, так як в різних браузерах значення можуть округлятися з різним ступенем точності. А дотримуючись одиниць зміни системи координат SVG-файлу, ми позбавляємо себе від головного болю, супутньої всім цим округлення.
Рішення з обтравочним контуром
Хоча рішення з border-image дуже компактне і добре відповідає принципам DRY, воно накладає певні обмеження. Наприклад, наш фон все так же повинен бути або цілком, або хоча б уздовж крайок заповнений суцільним кольором. А що, якщо ми хочемо використовувати інший тип фону, наприклад текстуру, візерунок або лінійний градієнт? Існує інший спосіб, який не має подібних обмежень, хоча, звичайно, певні обмеження його застосування є. Пам'ятайте властивість clip-path з секрету «Як зробити ромб». Відсічні контури CSS володіють вражаючим властивістю: вони дозволяють змішувати процентні значення (за допомогою яких ми вказуємо габаритні розміри елемента) з абсолютними, забезпечуючи неймовірну гнучкість. Наприклад, код обтравочного контуру, обрізати елемент до форми прямокутника зі скошеними кутами розміром 20px (якщо вимірювати по горизонталі), виглядає так:
background: # 58a;
clip-path: polygon (
20px 0, calc (100% - 20px) 0, 100% 20px,
100% calc (100% - 20px), calc (100% - 20px) 100%,
20px 100%, 0 calc (100% - 20px), 0 20px);
Незважаючи на стислість, в цьому фрагменті коду принципи DRY не дотримано, і це стає однією з найбільших проблем, якщо ви не використовуєте препроцесор. Насправді цей код - найкраща ілюстрація принципу WET з усіх рішень на чистому CSS, представлених в цій книзі, адже для зміни розміру кута тут потрібно внести цілих вісім (!) Правок. З іншого боку, фон можна поміняти за допомогою тільки однієї правки, так що у нас є хоча б це. Одна з переваг даного підходу - те, що ми можемо використовувати абсолютно будь-який фон або навіть обрізати підмінні елементи, такі як зображення. На рис. 3.38 показано зображення, стилізоване з використанням зрізаних кутів. Жоден з попередніх методів не дозволяє домогтися такого ефекту. Крім цього, властивість clip-path підтримує анімацію, і ми можемо анімувати не тільки зміна розміру кута, але і переходимежду різними фігурами.
Все, що для цього потрібно, - використовувати інший відсічний контур. Крім багатослівності та обмеженою підтримки браузерами, недоліком цього рішення є те, що, якщо ми не подбаємо про досить широкої забиванні, текст також буде обрізаний, так як при обрізанні елемента його складові ніяк не враховуються. На противагу цьому метод з градієнтом дозволяє тексту просто виходити за межі обрізаних кутів (адже вони всього лише частина фону), а метод з border-image працює так само, як звичайні рамки, - переносить текст на новий рядок.