Як зрабіць у CSS трохкутнік: самыя зручныя спосабы

Вельмі часта сучасныя прыгожыя вэб-старонкі ўтрымліваюць шмат прывабных графічных элементаў. Сярод іх выкарыстоўваецца такая найпростая геаметрычная фігура як трохкутнік, які ўжываюць для дызайну мноства элементаў. Да прыкладу, іх выкарыстоўваю ў якасці паказальніка на нейкі аб'ект на старонцы, каб наведвальнік сайта звярнуў сваю ўвагу на яго. Вядома, асноўная функцыя трыкутніка - дэкаратыўная, так як блокі, якія змяшчаюць іх, становяцца больш сучаснымі і прывабнымі.

Не ўсе ведаюць, як ствараць такія фігуры з дапамогай каскадных табліц стыляў, і задаюцца пытаннем аб тым, як зрабіць трохкутнік у CSS.

Прымяненне ў афармленні сайтаў

У вэб-дызайне трыкутнікі сустракаюцца паўсюль. Імі афармляюцца падказкі, меню, разнастайныя элементы карыстацкага інтэрфейсу. Часам іх ўжываюць пры стварэнні індыкатара працэсу загрузкі. І калі раней можна было абыходзіцца без іх, то зараз гэта немагчыма, і распрацоўшчыкі абавязаны прыстасоўвацца да такіх патрабаванням. Бо сёння створаны ў CSS трохкутнік - гэта найважнейшая частка ў пабудове ўзаемнай сувязі паміж часткамі інтэрфейсу і аб'яднанні ў адзінае цэлае.

Многія вярстальшчыкі здзіўляюцца, калі ім прыходзіць макет, у дызайне якога запар і побач трыкутнікі. Бо няма уласцівасцяў, якія б наўпрост стваралі гэтую геаметрычную фігуру. На самай справе даступна некалькі метадаў, якія дазваляюць гэта зрабіць.

Спосаб стварэння пры дапамозе рамкі

Першы метад, які дазваляе стварыць у CSS трохкутнік - border. Ён заключаецца ў выкарыстанні рамкі. Нягледзячы на тое што межы, якія ствараюцца з дапамогай ўласцівасці border не маюць прамога дачынення да трохвугольніка, менавіта яно прымяняецца найбольш часта для гэтай мэты.

Пры заданні нулявых вышыні і шырыні аб'екта, а таксама ўсталёўцы тоўстай мяжы, можна ўбачыць квадрат, які складаецца з чатырох роўных трыкутнікаў. Хітрасць заключаецца ў тым, што трэба пакінуць толькі неабходную мяжу, а астатнія зрабіць празрыстымі. І вось, атрымліваецца намаляваны ў CSS трохкутнік патрэбнага кірунку і колеру.

Ствараць куты пры дапамозе ўласцівасці «рамкі» зручна, таму што няма неабходнасці ў маляванні карцінкі, выкарыстоўваючы якой-небудзь графічны рэдактар. Параметры трыкутніка заўсёды можна змяніць у кодзе. А яшчэ гэта эканоміць час распрацоўніку. Камбінуючы розную шырыню рамкі, дастаткова лёгка атрымаць фігуру. Для разумення таго, як гэта функцыянуе, можна проста стварыць пусты элемент з нулявой шырынёй, вышынёй і вельмі тоўстай рамкай рознага колеру з кожнай з бакоў. Так, робячы тры бакі з чатырох празрыстымі, атрымліваюць трыкутнікі розных відаў:

• трохкутнік, які глядзіць налева, бакі якога роўныя;
• трохкутнік, які глядзіць налева і сплюшчаны;
• выцягнуты трохкутнік, які глядзіць налева;
• прастакутны трыкутнік, у якога прамы кут злева;
• трохкутнік, які глядзіць уніз;
• трохкутнік, які глядзіць уверх;
• трохкутнік, які глядзіць направа і мноства іншых разнавіднасцяў.

выкарыстанне псевдоэдементов

З дапамогай такіх прыёмаў можна ствараць куткі у усплываючых указанняў і падказак. Для таго каб прымацаваць з дапамогай CSS трохкутнік да блоку, часцей за ўсё праграмісты выкарыстоўваюць такія псевдоэлементы як after і before. Калі выкарыстоўваць іх разам, то можна намаляваць ў CSS трохкутнік, які мае абводку.

Камбінуючы іх, распрацоўшчыкі ствараюць мноства прыгожых стрэлак, ужываючы ўласцівасць position: relative да бацькоўскага элементу. Гэта робіцца для таго, каб псевдоэлементы не з'ехалі са сваіх месцаў.

Плюсамі выкарыстання рамкі CSS для стварэння трыкутнікаў з'яўляюцца:

• хуткае і лёгкае рэдагаванне памеру і колеру пры дапамозе уласцівасцяў;
• падтрымка усімі браўзэрамі.

мінусы:

• бо выкарыстоўваюцца рамкі, няма магчымасці ўжыць градыенты, цені;
• часам, калі карыстальнік глядзіць старонкі ў браўзэры Firefox, значэнне празрыстасці можа не спрацаваць, і гэта будзе скажаць карцінку.

Выкарыстанне гатовай карцінкі

Наступны метад стварэння трыкутнікаў - гэта прымяненне закадаванай карцінкі. Трохкутнік загадзя малюецца ў графічным рэдактары і канвертуецца ў спецыяльны код пры дапамозе спецыялізаваных сэрвісаў.

Плюсам такога спосабу з'яўляецца тое, што можна зрабіць вельмі прыгожы дызайн з ценямі, градыентамі і рамкамі і потым проста ўсё гэта закадаваць. А да мінусаў можна аднесці тое, што не кожны добра валодае графічнымі праграмамі. Да таго ж, калі малюнак мае вельмі вялікі памер, то радок кода атрымліваецца проста велізарнай. Гэта нязручна для распрацоўніка.

Асобным пунктам стаіць выкарыстанне браўзэраў Internert Explorer старых версій. У іх дадзены спосаб папросту ня будзе працаваць.

Метад перавернутага квадрата

Адным са спосабаў з'яўляецца стварэнне сродкамі CSS перавернутага квадрата. Тут неабходныя два блокі. Але некаторыя выкарыстоўваюць псевдоэлементы.

Спачатку ствараецца квадрат. Ён будзе змесцівам паварочваюць элемента. Затым яго разгортваюць на 45 градусаў, каб ён стаў падобным на алмаз. Затым вырабляецца зрух ўверх, і знешні блок хаваецца пры дапамозе ўласцівасці overflow: hidden. Гэтае рашэнне таксама не з'яўляецца кроссбраузерным, і часам карцінка будзе адлюстроўвацца не так, як хацелася б.

вынікі

Такім чынам, існуе мноства метадаў для стварэння трыкутніка. Толькі як не згубіцца ва ўсіх гэтых уласцівасцях CSS? Даведнік у такім выпадку заўсёды выбавіць. У ім апісаны ўсе ўласцівасці каскадных табліц стыляў.

Для тых хто не жадае ўдавацца ў праграмаванне і праглядаць CSS-даведнік, існуюць онлайн-рэдактары, якія генеруюць трыкутнікі патрэбных памераў і кветак. У візуальным рэдактары карыстальнік выбірае і настройвае ўсе параметры фігуры. Сканвертаваць у код CSS трохкутнік генератар змяшчае ў асобнае акенца прама на лета. Затым згенераваны код проста ўстаўляецца ў табліцу стыляў і падганяецца пад дызайн старонкі.