Як створити паралелограм на CSS, Як створити сайт
- Головна   /  Уроки   /  Уроки CSS   /  Рецепти CSS   /  Фігури   /  
- Як створити паралелограм на CSS
Як створити паралелограм на CSS
Проблема
Паралелограми - це розширена версія прямокутників: їх сторони паралельні, але кути не обов'язково прямі. У візуальному дизайні вони часто використовуються для надання оформлення динамічності та передачі відчуття руху. Давайте спробуємо створити посилання, оформлене за допомогою CSS у стилі скошеної кнопки. Нашою відправною точкою буде проста плоска кнопка з дуже простим оформленням. Форму скошеного прямокутника ми надамо їй за допомогою трансформації skew(), (про трансформації в css я писав тут) ось так:transform: skewX(-45deg); Однак в результаті цього вміст кнопки також спотворилося, стало некрасивим і нечитаним. Чи існує спосіб створення скошених контейнерів так, щоб їх вміст при цьому не перекошувався?
Рішення з вкладеними елементами
CSS.button.button > div Як видно цей підхід працює, але потребує додаткового елемента HTML. Однак не слід турбуватися, якщо зміна розмітки для вас неприйнятна або якщо ви дійсно прагнете зберегти чистоту розмітки, — існує також рішення на чистому CSS.СПРОБУЙТЕ САМІ! http://play.csssecrets.io/parallelograms
Наша кнопка до застосування будь-яких трансформацій
Рішення з псевдоелементом
Ще одна ідея - створити псевдоелемент, до якого будуть застосовані всі стилі (фони, рамки тощо), апотім трансформувати його. Оскільки наш вміст не належить псевдоелементу, трансформація на нього не поширюватиметься.
Спробуймо застосувати цю техніку для стилізації посилання так, як у попередньому розділі. Нам потрібно, щоб поле нашого псевдоелемента залишалося гнучким і автоматично успадковувало габаритні розміри свого предка, навіть коли вони визначаються вмістом. Найпростіший спосіб досягти цього - застосувати position: relative до предка, а до згенерованого вмісту - position: absolute і зробити всі зміщення нульовими, щоб воно розтягувалося горизонталлю і по вертикалі до розмірів свого предка. Ось як виглядатиме необхідний код:.buttonposition: relative;/* колір тексту, забивання тощо.>.button::beforecontent: »;position: absolute ;top: 0; right: 0; bottom: 0; left: 0;> Поки що згенероване поле відображається над вмістом, затуляючи його, і як тільки ми визначаємо для нього якесь тло, вміст стає невидимим. Щоб виправити це, застосуємо z-index: -1 до псевдоелементу, щоб він перемістився нижче свого предка.
Після цього можна застосувати до псевдоелементу необхідні трансформації і насолоджуватися результатом. Підсумковий варіант коду показаний далі; він забезпечує той же візуальний результат, що і попередня техніка:.buttonposition: relative;/* колір тексту, забиття і т. п. */ >.button::beforecontent: »; /* щоб згенерувати поле */position: absolute;top: 0; right: 0; bottom: 0; left: 0;z-index: -1;background: #58a;transform: skew(45deg);> Якщови застосовуєте цей ефект до елемента, який за умовчанням є рядковим (inline), то не забудьте встановити для нього інше значення властивості display, наприклад inline-block або block, інакше трансформація не буде застосована. Те саме стосується і внутрішнього елемента.
Наш псевдоелемент в даний час знаходиться вище за свій вміст, тому застосування до нього background: #58a призводить до того, що побачити вміст стає неможливо Ці техніки корисні не тільки при застосуванні трансформації skew() . Їх можна використовувати з будь-якими іншими трансформаціями, щоб змінювати форму елемента, не впливаючи на його вміст.