Како да CSS триаголник: најзгодно начини

Многу често убава модерна веб страници содржат многу атрактивна графика. Меѓу нив наједноставниот користи како геометриска форма како триаголник, кој се користи за дизајнирање на мноштво елементи. На пример, тие се користат како покажувач на објект на страната на посетителот сврте своето внимание кон него. Се разбира, главната функција на триаголник - декоративен, како блокови кои ги содржат, се повеќе модерни и привлечни.

Не секој знае како да се создаде таква личност преку Cascading Style Sheets, и се прашувате како да се направи еден триаголник во CSS.

Примена во дизајнот на веб-сајтови

Во веб дизајн триаголници насекаде. Тие се направени од совети, менија, различни UI елементи. Понекогаш тие се користат да се создаде индикатор за подигање процес. И ако порано тоа беше можно да се направи без нив, но сега тоа е невозможно, а програмерите се должни да се прилагодат на ваквите барања. Впрочем, денес создадени во CSS триаголник - важен дел во изградбата на интерконекцијата помеѓу деловите на интерфејс и се спојуваат во еден единствен ентитет.

Многу веб дизајнери се збунети кога станува збор за изгледот, дизајнот на која е многу често триаголници. По сите, без својства кои директно ќе ја креирате оваа геометриска фигура. Всушност, постојат повеќе методи за да го направите тоа.

Еден метод на креирање на рамка користење

Првиот метод овозможува да се создаде еден триаголник во CSS - граница. Тој е користење на рамки. И покрај фактот дека границите кои се креирани со користење на границата на имотот не е директно поврзана со триаголник, што се користи најчесто за оваа намена.

Кога поставување на нула висината и ширината на објектот, како и за изработка на дебел граница, може да се види на плоштадот, која е поделена во четири еднакви триаголници. Трикот е во тоа што треба да се задржи само на потребните граница, а другите да се направи транспарентен. И сега, излегува триаголник составен во вистинската насока на CSS и боја.

Креирај агли користење на својствата "рамка" е погодно, бидејќи нема потреба да се подготви слики со користење на било уредување. триаголник параметри секогаш може да се промени во кодот. И тоа заштедува време инвеститорот. Со комбинирање на различни ширината на рамката лесно е доволно за да се добие слика. За да се разбере како тоа функционира, можете едноставно да се создаде празен елемент со нулта ширина, висина, и многу густа рамка со различна боја на секоја страна. Значи, со што на три страни од четири транспарентни триаголници се од различни видови:

• триаголник, во потрага на лево, од двете страни на кои се еднакви;
• триаголник, гледајќи лево и срамнети со земја;
• издолжена триаголник, со кои се соочува лево;
• аголни триаголник, чии лево кон десно агол;
• триаголник во потрага надолу;
• триаголник угледување;
• триаголник, во потрага на правото, како и многу други видови.

користење psevdoedementov

Со овие техники, можете да креирате агли во упатството за pop-up и совети. За да прикачите преку CSS триаголник на единицата, во најголем дел на програмерите користат како псевдо-по и пред тоа. Ако ги користат заедно, тоа е можно да се подготви во CSS триаголник на мозочен удар.

Со комбинирање на нив, на програмерите да се создаде различни убави стрелец, со примена на имот позиција: релативна на елементот родител. Ова е направено со цел да се псевдо-не се пресели надвор од своите места.

Плус употребата на CSS рамка за создавање триаголници се:

• брзо и лесно уредување на големини и бои, со помош на имот;
• поддршка на сите пребарувачи.

Конс:

• поради тоа што користи рамка, не постои можност да се примени на градиенти, сенки;
• Понекогаш, кога корисникот ќе изгледа на страницата на Firefox прелистувачот, вредноста на алфа може да не работат, а тоа ќе ја наруши сликата.

Користење на готови слики

Се предвидува следниов начин на создавање на триаголници - е употребата на кодирани слики. Триаголникот се подготвени однапред во уредувачот на сликата и претворена во посебен код со специјализирани услуги.

Предноста на овој метод е тоа што може да се направи многу убава дизајн со сенки, градиенти, и рамката и потоа само да го кодираат сите. Но во надолна линија е фактот дека не секој е одлично познавање на графички програми. Покрај тоа, ако на сликата е многу голема, на линија на кодот се добива со едноставно огромен. Ова е незгодно за инвеститорот.

А посебна ставка во вредност од користење на пребарувачи Internert Explorer стари верзии. Во нив, метод едноставно не функционира.

Метод за превртен квадратен

Еден начин е да се создаде помош на CSS превртена плоштад. Постојат два основни единица. Но, некои луѓе го користат псевдо.

Прво, да се создаде плоштад. Тоа ќе биде содржината на ротирачки член. Потоа го распореди за 45 степени, така што тоа изгледаше како дијамант. Потоа, со поместување нагоре и надворешна единица е скриен од прелевање на имотот: скриени. Ова решение не е крос-пребарувачот, а понекогаш и на сликата не се прикажува, како сакате.

резултати

Значи, постојат многу методи за да се создаде еден триаголник. Само тоа не се изгуби во сите овие CSS особини? Суд во овој случај секогаш ќе ви помогне. Тој ги опишува сите карактеристики на Cascading Style Sheets.

За оние кои не сакаат да одат во програмирање и да ги видиш на CSS-водич, постојат онлајн уредниците, кои произведуваат триаголници право големини и бои. Во визуелната уредник, корисникот одбира и конфигурира цела фигура поставувања. Конвертира во генератор триаголник CSS кодот поставен во посебен прозорец на мува. Потоа, на генерираниот код е едноставно вметнува во интерфејс и да одговара на дизајнот на страната.