ПРОБЛЕМА #4 | Как сделать параллелограмм?

Автор Andrei Golubev
ПРОБЛЕМА #4 | Как сделать параллелограмм?

Всем привет.

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

Ну сейчас увидеться.

Но довольно вещь частого использования обособленных таких необычных дизайнах. Давайте создадим GIF с ней много проблем цветы необычной фигурой давайте я значит класс добавлял пороги параллелограмма. Что такое параллелограмм давайте я поставлю. А здесь ширину тянет давайте побольше. Том и грант я забыл уже 428 допустим вот такой получился и давайте, что сделать сделаем предположительно. Сейчас я покажу, что — это такое трансформер скинул получается икс минус 45 градусов. Вот она случилась параллелограмм немножко не то давайте 30 вот как-то так то есть — это скошенная фигура должны знать, что такое transform как им пользоваться более-менее. Какие трансформации — это такая есть lx24 эту фигуру, чтобы хотим создать как бы фигуру вики-текст тоже перекрасился. Я её. Уменьши эту фигуру так не сделал 84 и сделаю юморист так вот наш параллелограмм. Теперь давайте сделаем допустим. Это ссылка навигационные панели главное так и Color вот так больно T1One Font Font Family в городе можно давать нам так Display Flex justify-content фитнес-центр. Так, что я всё сделаю я просто сделал более-менее красивую надпись посередине стоит сделать цвета её правильно функции в половине. Повелитель вот так вот её по центру. То есть — это ну не обращайте внимания пусть — это будет у тебя там внизу постановки мы видим одну проблему она у нас тоже скошенной мы этого не хотим как — это можно исправить во-первых можно их прибить ещё один IV ладно. Я вот собираюсь там так можно применить ещё один div и убрать для этого дела брат брать для этого диван skills Mix так, но либо не работает либо не применяется любопытно. Подождите если 2 в 30 градусов сдвинута то мы должны на 30 градусов в другую сторону разбавить вот-вот всё. Как видите. Мы решили проблемы можно кстати добавить pairing вот как бы довольно красивенько, но этот больничный элементы — это немного не то сейчас я вас познакомлю с более необычным способом и довольно прям. Гениально это. Гениально мне очень понравился давайте я эту этот скетч на купальник я его оставлю. И вам скинул евреев я собираю которые так других белков разбудишь before новые новые новые вариант так я — это всё скопирую как бы без вложенных. Вот так мы выбираем нас уже. Найди мы сделаем без него так вопрос типа также мы сможем — это сделать во-первых скопировал эти все сидели. Так значит во-первых набираем носки мы убираем всё в принципе больше ничего не убирает так так — это будет спортзал вот мы выбрали наш союз он нам типа сейчас не надо. И как же. Мы — это сделаем, а мы сделаем — это вот так мы добавим пар-2 здесь мы напишем значит background. Так давайте немного другой цвет поставим 62 допустим вот вот этот цвет чтобы они отличались немного иди без мы сделаем так чтобы он скатился мы сделаем. 0 Bottom Left 0 Right 0, а также для нашего элемента формы сделаем пависин рельеф позиционировал sanatbek на него. Так теперь. Значит надо ещё кстати контент сделать так и нам надо ещё чтобы заработать топ и всё. Вот — это нам нужно сделать поззи где он. Абсолют Так теперь мой разговор элементов поместился как бы надо в нашем элементом и поэтому мы не видим текст. Давайте теперь сделаем как бы трансформациями трансформер плюс минус 30 градусов так. Ну типа. Ай — 45. Так теперь нам надо значит так чтобы он был под нашим элементом тут происходит какая-то странная хрень. Я не совсем понимаю почему так происходит потому, что потому что. Так не должно быть по сути. Ладно сейчас перепроверил всё я вернусь. Так, что я вроде более-менее решила этом году в общем вот, что у меня получилось, что же я сделал. Я для нашего элементов самого который являлся вот он квадратный я хотел его прозрачный, но тут ещё можно было бы сделать очки если они конечно не те, что я думаю вот что-то подобное общем я сделал так видите. Этот способ довольно сложный, но в принципе терпимо не помещается говорила эти вот так вот в принципе сойдёт выглядит нормально его можно перемещать его можно с ним всё, что всё, что хотите делать. Вот на этом в принципе урок закончен я вот этот вот эту ссылку я скину в описании. Вы можете посмотреть фу таким кодом всем до встречи. Всем пока.

0 комментариев
0

Читайте также