Геометрические фигуры на HTML и CSS // Треугольник стрелка круг трапеция и другие

Подписаться 313 тыс.

Просмотров 77 тыс.

50% 1

👉 Курс с гарантированным трудоустройством от Skillbox - clc.to/kEC4Ig
Геометрические фигуры незаменимы в современной верстке и часто применяются в самых разнообразных случаях. В этом выпуске покажу как сделать простые геометрические фигуры, такие как треугольник стрелка круг трапеция и другие на HTML и CSS.
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelance... (teleg.run/free...)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

Опубликовано:

23 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 230

@FreelancerLifeStyle 4 года назад

Ценю твой ЛАЙК и КОММЕНТ! Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle Telegram чат по верстке: t.me/flschat (teleg.run/flschat) Instagram: instagram.com/freelancer.lifestyle/ Facebook: facebook.com/freelancerlifestyle/

@АннаМорозова-ц1щ 3 года назад

Подскажите как сделать гибкий треугольник ? Чтобы он сжимался и растягивался

@igorprotsenko3304 4 года назад

С кучи ютуберов этот канал как то лучше всех заходит. Ничего не бесит, все доступно))

@FreelancerLifeStyle 4 года назад

Спасибо большое! Я рад)

@qwe-rty- 3 года назад

Женя, привет, вот сижу пересматриваю твои видосики и хочу уточнить. Ты рассказывал про фигуры, а можешь, пожалуйста показать изометрию в действии, ведь сейчас очень много разных сайтов используют её для демонстрации товара или же просто как успешный дизайнерский ход? Думаю, многим зайдёт такого рода ролик из серии "как это сделать". Кто согласен - поддержите лайком!

@vzvanov 4 года назад

Решил самостоятельно разобраться с тем, как сделать шестигранник. Доложу я Вам лучшей практики для новичка и придумать нельзя. Сразу начинаешь понимать зачем делается начальное обнуление, как выполняется позиционирование и какие чудесные трансформации возможны с псевдоэлементами. Hexahedron получился что надо. Правда "пришлось изрядно по лохматить бабушку ", но для новичка оно самое то. Твои видео побуждают творить, выдумывать, пробовать. Огромная благодарность и уважуха за твой труд.

@FreelancerLifeStyle 4 года назад

Спасибо большое! Именно так и нужно!

@МихаилРазуваев-ь6л 4 года назад

Блин, сколько же времени раньше мучился, чтобы слепить фигуры... А теперь "я точно знаю, как это сделать"))) Спасибо, Жека!

@FreelancerLifeStyle 4 года назад

Пожалуйста! Рад что полезно!

@ВалерийКостинский 4 года назад

все я понял в чем твой плюс! =) твоего канала и манеры подачи. Остальные рассказывают как сделать трапецию - 15 минут! у тебя за 7 минут все примеры. это круто! =) то чего не хватает в ютубе! Коротко и по делу, прям как у меня с женой =)

@FreelancerLifeStyle 4 года назад

Я так понимаю, жена иногда мечтает о 15ти минутном ролике )))

@ВалерийКостинский 4 года назад

@@FreelancerLifeStyle о 8ми!) как на прошлый новый год

@AlinaDotsenko-d6q 4 года назад

Спасибо, очень доступно, теперь понятно как это сделать! 💕

@FreelancerLifeStyle 4 года назад

Замечательно!

@annagrigorewa 4 года назад

Даже я всё поняла. Спасибо. Не понимаю, как рука у кого-то поднимается ставить дизлайки((((

@FreelancerLifeStyle 4 года назад

Всем не угодишь) Я рад что все понятно и полезно! С наступающим!

@nextkrachun4290 2 года назад

У меня потому что видео говно

@IljaJermamakov 4 года назад

ООО как долго я искал такой канал ). Спасибо тебе огромное за труды.

@FreelancerLifeStyle 4 года назад

Пожалуйста! Я рад что нашел)

@roman-_-novikov 3 года назад

Оказывается все достаточно просто, спасибо)

@FreelancerLifeStyle 3 года назад

Пожалуйста!

@ВолодяКлимов-р8н 4 года назад

Вот это я понимаю контент, лайк не глядя!

@FreelancerLifeStyle 4 года назад

Спасибо!

@artyomvoytenko1237 4 года назад

Оо, наконец-то расслабончик) Вспомнил геометрию 8 класс) Спасибо за урок, все понятно и доступно)

@FreelancerLifeStyle 4 года назад

А говорят геометрия не нужна 😂💪

@GrifanoRide 4 года назад

Позитивно, информативно, оставляет массу удовольствия от просмотра) Бегу делать треугольные метки на карточках с товаром)

@FreelancerLifeStyle 4 года назад

Супер!

@const-shish 4 года назад

Спасибо тебе большое за контент! Ты делаешь всё очень классно и доступно!

@FreelancerLifeStyle 4 года назад

Спасибо! Стараюсь!

@Volia-sv7 4 года назад

Самые лучшие уроки! Очень полезные! Отличная подача! Большое спасибо!

@FreelancerLifeStyle 4 года назад

Пожалуйста! Рад что полезно!

@BorderInVais 4 года назад

Суперский урок. Всё так понятно и легко. Благодарю:)

@FreelancerLifeStyle 4 года назад

Спасибо! Я очень рад!

@Denis-t2m 4 года назад

Это лучшие уроки из всех, что я видел(платных в том числе) спасибо за это))

@FreelancerLifeStyle 4 года назад

Спасибо! Я очень рад!

@example6963 4 года назад

также можно использовать clip-path: polygon(), что однозначно уменьшит количество кода)

@FreelancerLifeStyle 4 года назад

поддержка браузерами не очень(

@Olegatorius1 4 года назад

Просто и доступно , за 7.35 минут. Это лайк однозначно, спасибо!

@FreelancerLifeStyle 4 года назад

Спасибо! Стараюсь)

@Hypnogajable 4 года назад

Спасибо за простой и понятный способ реализации фигур через стили!!!

@FreelancerLifeStyle 4 года назад

Пожалуйста!

@armenakcomp 2 года назад

Класс, так классно объясняешь, что то что казалось сложным, оказалось проще простого. Спасибо!

@alexasanchobetherestors9962 Год назад

Отлично! Как раз в планах научиться делать слайдер, а эти знания при его создании непременно пригодятся! Спасибо!

@A-tri 3 года назад

лайк за выговаривание параллелограмма. Молодец! Так держать.

@_Lanselot_ 4 года назад

Странно, что кто-то ставит дизлайки. Вроде и воды мало, и рассказывает Евгений доступно, и всё-равно есть недовольные.

@FreelancerLifeStyle 4 года назад

И всегда будут! Это нормально)

@olezhonnv3215 4 года назад

Куда ж без них-то?

@KindCat21 4 года назад

Опять годное видео: минимум воды- максимум пользы.

@FreelancerLifeStyle 4 года назад

Спасибо!

@ОльгаЛитвинова-ж8ш Год назад

Добрый день! Благодарю, Женя! Быстро, полезно, доступно, просто и понятно! А если "оживить" фигуры с помощью :hover, transform, то еще и весело! Успехов! 👍🤝🙂

@ГЕНАЛУЖИЦКИЙ 5 месяцев назад

Спасибо, просто и ясно.!

@Ayt0_on 2 года назад

как же гениально и просто, спасибо

@ЕгорКоротцев-ч2х 4 года назад

Хороший канал, здесь я многому научился. Спасибо большое! Но всё ещё испытываю проблемы с вёрсткой. Можете только подсказать идею, как верстать блок, с которым у меня не получается?

@FreelancerLifeStyle 4 года назад

У нас тут чат по верстке t.me/flschat

@Berunadotto 4 года назад

Спс за твой труд! Сен-сей🙏

@FreelancerLifeStyle 4 года назад

Пожалуйста!

@ИгорьКащи 2 года назад

Женя, спасибо, за ТРУД !!! Конкретно по данному уроку, это у меня только так или у всех, hover нормально работает только с triangle-up.

@ДенисСкворцов-к4ъ 3 года назад

А я треугольники вырезал с макета в png или как иконки скачивал).И не задумывался, что можно через стили. Отличный урок)

@FreelancerLifeStyle 3 года назад

Спасибо!

@sergiizdorovko4076 Год назад

очень классно всё обьясняешь)

@СанёкТубот 3 года назад

класс легко и просто без before-after, спс

@NeveraIs 4 года назад

Ждем вторую часть, в которой вы расскажете как сделать тень под сложной фигурой (вторая половина списка) :-)

@FreelancerLifeStyle 4 года назад

Хех, что-то придумаю)

@NeveraIs 4 года назад

А потом третью со сложными (составными) фигурами, типа указатели (прямоугольник со стрелкой) и четвертую - тени под составными фигурами)))) ну или применение svg в html =)

@dimamorph 4 года назад

тоже ждемс)

@brodyagaPATY 4 года назад

Ооо дождались🔥🔥🔥 Евгений красава!!! Лучший🔥🔥🔥

@FreelancerLifeStyle 4 года назад

Спасибо! 🤘

@AK-it4nk 4 года назад

Отличная подборка без лишнего пездежа на 18минут

@FreelancerLifeStyle 4 года назад

Спасибо

@АнтонКотов-п9э 4 года назад

Полезный видос! Спасибо!

@ob7349 3 года назад

подивилась - ніби легко. На практиці трохи плуталась, але потім розібралась з усім. Дякую, дуже круто!!! :-)

@ВладимирК-ь9г 4 года назад

Спасибо за видео. Хотелось бы увидеть треугольники и трапеции с содержимым внутри.

@FreelancerLifeStyle 4 года назад

Спасибо! Используй позиционарование и псевдоэлементы!

@ВладимирК-ь9г 4 года назад

Спасибо! Замечательный ответ! - Как добраться до Урюпинска? - Используй карту и средства передвижения! @@FreelancerLifeStyle

@olezhonnv3215 4 года назад

Гугли лучше SVG. Для сложных композиций это будет более правильный выбор. А бордеры - это стрелочку по шурику навернуть где-то.

@bex8322 3 года назад

Уау!!! Спасибо, все понял! и кстати как у тебя получатся на все комменты отвечать?

@Степан-с4х7к 3 года назад

Уважаю тебя мужик!

@boltik_152 Год назад

Просто и понятно! Спасибо!

@ГерманХамитов-ж4ь 4 года назад

Спасибо большое, очень полезное видео!

@FreelancerLifeStyle 4 года назад

Пожалуйста!

@energomet 3 года назад

спасибо, товарищ.

@МаксимКрутов-е8б 4 года назад

Спасибо огромное!!! Честно говорю, до просмотра этого видео я никак не мог понять как делать треугольники! После просмотра понял последовательность, теперь любой треугольник могу сверстать! Ещё раз спасибо!!!!!

@FreelancerLifeStyle 4 года назад

Пожалуйста! Рад что полезно!

@МаксимКрутов-е8б 4 года назад

Невероятно полезно. Приятно учиться. Буду Вам очень признателен, если сделаете урок про эффекты при прокрутке страницы, а именно плавное появление разных блоков, справа, слева. Очень непросто найти качественный материал на эту тему. Заранее спасибо Вам!!!

@FreelancerLifeStyle 4 года назад

Да, сделаю

@МаксимКрутов-е8б 4 года назад

Круто! Спасибо Вам!!! Буду ждать).

@olezhonnv3215 4 года назад

Классный урок - лайк! Лично я предпочитаю SVG для этих целей. Эта фишка с бордерами - она на хак какой-то похожа. Трюк! Используется нюанс рендеринга границ браузером. А SVG - это реальный вектор, в котором фигура - это фигура. Хотя там с координатами придется играться, возможно дольше. И по тексту больше занимает, так что и бордеры полезно знать.

@FreelancerLifeStyle 4 года назад

Ну, каждый делает как хочет))

@DAROM-TK 3 года назад

Мне нужно было добавить текст внутри фигур, причем с переносами, причем текст динамически меняется, и чтобы лишнее не вылазило за пределы фигуры. Так вот, позиционирование текста в svg браузеры толком не поддерживают. Я убил двое суток и кучу костылей придумал , чтобы это реализовать. А с div , тем более с простыми фигурами, все это парой строчек кода решается. Для каждой задачи свои инструменты.

@АлександрХ-ф5й 2 года назад

А прямоугольную кнопку button в формах можно сделать в виде стрелки вправо путем таких манипуляций с бордером?

@АндрейПотапов-ш9ц 4 года назад

Класс, спасибо. Правда не сильно понял за чтет чего срез треугольников идёт. Надо будет пробнуть вместо прозрачного цвета другие поставить и постотреть что получается.

@FreelancerLifeStyle 4 года назад

Пожалуйста! Как раз за счет прозрачного бордера!

@Яна-ы7и8з 4 года назад

Спасибо за уроки💕

@FreelancerLifeStyle 4 года назад

Пожалуйста! 😊

@romanhassazhyrov5558 4 года назад

Крайне полезно, продолжай в том же духе! (:

@alexkam8934 4 года назад

Евгений вопрос- создать треугольник и сделать тень для него - это возможно? я пробовал но треугольник создается визуально, но фактически это прямоуголник с двумя закрашенными в цвет фона бека углами и придобавлении тень рисутеся от прямоугольника(((

@alexkam8934 4 года назад

Ты гений! Спасибо.

@daniyar_bakibayev Год назад

А у меня возник вопрос, а обязательно иметь закрытый тег див?

@marshmallowtop2992 Год назад

Хороший видос! Можешь подсказать как сделать чтоб фигурки создавались горизонтально а не вертикально

@ktstarpotapova9165 4 года назад

Спасибо за Ваши видео, всё очень доступно объясняете. Сейчас не могу справиться с задачей построить прямоугольную трапецию со скругленными углами. Просто прямоугольную трапецию построила, а вот углы не получается скруглить, border radius не справляется

@HA_CTPIME 2 года назад

Простеньке але дуже корисне вiдео.👍

@alshabanov 4 года назад

Ого, первый раз вижу у тебя рекламу :))

@FreelancerLifeStyle 4 года назад

Это было давно)

@enotus_chang 2 года назад

В данном примере не овал, а эллипс. А transform не меняет сам элемент, а только его отображение. Кликабельная область же остаётся прямоугольной.

@МиколаГагін-э2с 4 года назад

Не на что не намекаю) влево смотреть на подсказки)))

@FreelancerLifeStyle 4 года назад

Когда-нибудь я пойму о чем речь, но не сегодня)

@artemafonin9474 4 года назад

Спасибо за прекрасные уроки! Возник вопрос - как закруглить углы. Прочитал про размещение в круге, но у меня неровная трапеция. Не факт, что получится подогнать под круг. В макете прописано свойство border-radius: 50px, но из-за его применения слетает прозрачная граница сбоку. Есть ли возможность реализовать закругление углов без размещения в круге?

@Sultan-um7gm 3 года назад

Когда я использую css фигуры с slick slider, css задерживается. Выполняется сначала слмк потом появляется фигуры. Выглядит не очень.

@brokert3163 Год назад

Привіт при заповненні фігур елементами форма фігур ламається, що можна зробити? Допустимо намалював коло і всередині помістив стрілку і постать зламалася

@НиколайТвердохлеб-э1ш Год назад

Дякую супер

@-Forever-Young- 3 года назад

0:23 как сделать такие стрелочки пунктирные?

@aleksey_nikonov 3 года назад

попробовал трапецию перевернуть - получилось и еще скругление углов можно на одной из сторон. .sub-trapezoid { width: 300px; border-top: 120px solid cornflowerblue; border-left: 50px solid transparent; border-right: 120px solid transparent; }

@zochixx Год назад

А как ставить их по разным местам? к примеру Я хочу поставит квадрат по середине а рядом с ним круг, как мне это сделать?

@DmytroBashlai 4 года назад

Да, Евгений излагает доступно! Skillbox это реальная школа или просто спонсор?)

@FreelancerLifeStyle 4 года назад

просто партнер выпуска

@henu3dimhoro 2 года назад

Жека, а как рисовать объемные фигуры? типо тетраэдра?

@velyar 4 года назад

Спасибо за старания:)

@FreelancerLifeStyle 4 года назад

Пожалуйста! 👍

@dorith7570 3 года назад

Что за плагин используется? Там все изменения происходят в риалтайме)

@black_hole_888_yt7 Год назад

У меня не меняется размер прямоугольника, точнее меняется , но закрашивается не весь, что делать?

@no_name_2mix 4 года назад

Класс! Спасибо)

@FreelancerLifeStyle 4 года назад

Пожалуйста! 👍

@ВолодяКлимов-р8н 4 года назад

Если у меня спросят: -Какая на ваше мнение самоя большая несправедливость в жизни? Тогда я отвечу: -Самая большая несправедливость, это то что у Фрилансера по жизни всего 47к подписчиков (Как минимум должно быть 1кк)

@FreelancerLifeStyle 4 года назад

Спасибо большое! Все будет!

@mykolachadovych7863 4 года назад

Спасибо

@FreelancerLifeStyle 4 года назад

Пожалуйста! 👍

@pavel_vorobyov 4 года назад

Изи лайк и коммент. Женя ты супер =)

@FreelancerLifeStyle 4 года назад

Спасибо большое! 🤘😎

@abduhalilrahmonberdiyev7562 3 года назад

ZOR CHIQIBDI RAHMAT

@НикитаСмирнов-н5е 4 года назад

и еще вопрос, как у этого треугольника закруглить теперь углы? и забыл поблагодарить за видео! как всегда очень круто! Жека спасибо!

@FreelancerLifeStyle 4 года назад

Спасибо! Как вариант вписать треугольник в круг)

@Square-tf8tg Год назад

Как поместить круг внутри блока

@irekan1981 2 года назад

а параллелограмм в другую сторону наклонить?

@SergejsErastovs 4 года назад

А как быть если надо поставить в фигуру текст? С овалами, прямоугольниками все хорошо, а вот элементы сделанные border'ами. Только через before/after?

@FreelancerLifeStyle 4 года назад

Верно! Поместив фигуру в псевдоэлемент можно её позиционировать как угодно.

@TtTalkUA 4 года назад

круто!

@FreelancerLifeStyle 4 года назад

Спасибо!

@ЮрийРудь-ш4г 3 года назад

Очень круто и полезно, правда нихрена не понял как треугольник выполняется с технической точки зрения, как оно работает ???

@FreelancerLifeStyle 3 года назад

Ну, прозрачный бордер и цветной

@ЮрийРудь-ш4г 3 года назад

@@FreelancerLifeStyle Спасибо за ответ! Блин, ты, по моему, единственный ютубер, который отвечает на мои тупые коменты. И как ты вообще на все находишь время??? Ты вообще спишь? Ты ешь?? Да ты человек вообще...???!

@1est2ast 2 года назад

Все гуд, но как работает транспарент до меня пока что так и не дошло :)

@romanpomin1967 4 года назад

Дякую за урок! Привіт з Києва)

@FreelancerLifeStyle 4 года назад

Привіт! Будь ласка!

@narekyazeryan2997 4 года назад

Пасиба Жека!

@FreelancerLifeStyle 4 года назад

Пожалуйста!

@alexshel8578 3 года назад

а можно ли как-то сделать простейший макет из примитивов в фотошопе или афтер эфектс и потом открыть его в виде такого вот кода?

@ИванПетров-я4й 3 года назад

Самый легкий урок, при том, что не любитель геометрии)

@ptRick-SUpd788 4 года назад

огонь! ))

@ПростойОбыватель-р5б 4 года назад

А как сделать, чтобы изменения фиксировались в реальном времени сразу на сайте?

@FreelancerLifeStyle 4 года назад

Один из способов использовать програмку Prepros ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BqO5Pj26om8.html

@ВладимирСтавинчук 2 года назад

Евгений, Скилбокс рекламодатель только или ты там преподавать начал?

@ВалерийКостинский 4 года назад

крутяк!!!

@FreelancerLifeStyle 4 года назад

Спасибо!

@vanyatoxic 4 года назад

На сколько я не люблю ставить лайки, но тебе вообще не жалко и 1000 лайков

@КириллТимофеев-п1л 4 года назад

Это лайк!

@FreelancerLifeStyle 4 года назад

Спасибос! 👍

@candid1628 4 года назад

А как сделать , чтобы верхний угол параллелограмма смотрел на право ?? Я только на лево понял : .parallelogram { Width: 300px Height: 150px Background-color: green Transform: skew(30deg) } Проблема в “skew” ? Или я что-то не понял ?