CSS skew() — нахил елемента
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте
автор: Bondskew()з обережністю, оскільки великі значення нахилу можуть вплинути на зрозумілість та доступність контенту. - Порада
-
При застосуванні
автор: Bondskew()до тексту зверніть увагу на збільшення або зменшення розміру контейнера, оскільки текст може витікати або обрізатися.
Синтаксис
skew(<angle>[, <angle>]);Функція skew може отримувати єдине значення:
-
<angle> -
Кут нахилу, виражений у градусах (
автор: Bonddeg), радіанах (rad), градах (grad) або поворотних точках (turn).
| Значення без задання: | 0deg |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 3.5 | 3.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 2 | 18 | 4 | 3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Перший елемент залишається без змін, а другий елемент має нахил 30deg.
HTML
<div id="description">
<h2>Нахил елементів</h2>
<p>Перший елемент залишається без змін, а другий елемент має нахил.</p>
</div>
<div id="result">
<div class="box"></div>
<div class="box skew"></div>
</div>CSS
#description {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
transition: transform 0.3s ease;
}
.skew {
transform: skew(30deg);
background-color: #FF0000;
}Наведіть курсор на елемент, щоб побачити зміну нахилу.
HTML
<div id="description">
<h2>Зміна нахилу елемента</h2>
<p>Наведіть курсор на елемент, щоб побачити зміну нахилу.</p>
</div>
<div id="result">
<div class="box"></div>
</div>CSS
#description {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
transition: transform 0.3s ease;
}
.box:hover {
transform: skew(20deg);
}Обидві стрічки нахилені через skew(-12deg). У верхній нахилився й текст, у нижній внутрішній елемент повернуто назад через skew(12deg) — фон скошений, літери прямі.
HTML
<div class="band">
<span class="plain">нахилений текст разом зі стрічкою</span>
</div>
<div class="band">
<span class="fixed">текст повернуто назад: skew(12deg)</span>
</div>CSS
body {
font-family: sans-serif;
font-size: 15px;
padding: 40px 24px;
overflow-x: hidden;
}
.band {
width: 420px;
padding: 16px 24px;
margin-bottom: 26px;
background: #2f6f9f;
color: #fff;
transform: skew(-12deg);
}
.fixed {
display: inline-block;
transform: skew(12deg);
}Коментарі
Коментарів ще немає — будьте першим!