Как да направя CSS триъгълник: най-удобните начини

Много често красиви съвременни уеб страници съдържат много атрактивна графика. Сред тях най-простите използва такава геометрична форма като триъгълник, който се използва за проектиране на множество елементи. Така например, те се използват като указател към обект на страницата на посетителя насочи вниманието си към него. Разбира се, основната функция на триъгълника - декоративен, като блокове, които ги съдържат, са все по-модерен и атрактивен.

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

Приложение при проектирането на сайтове

В уеб дизайн триъгълници навсякъде. Те са изработени от съвети, менюта, различни елементи от потребителския интерфейс. Понякога те се използват за създаване на индикатор на процеса по стартиране. И ако по-рано е било възможно да се направи без тях, но сега това е невъзможно, и разработчиците са длъжни да се адаптират към тези изисквания. В края на краищата, днес е създадена за CSS триъгълник - важна роля в изграждането на междусистемна връзка между частите на интерфейса и се сливат в едно цяло.

Много уеб дизайнери са объркани, когато става дума за оформлението, дизайнът на който е много често триъгълници. В крайна сметка, не притежава свойства, които пряко ще се създаде тази геометрична фигура. В действителност, има множество методи, за да направите това.

Метод за създаване на рамка, като използвате

Първият метод ви позволява да създадете триъгълник в CSS - граница. Той използва рамки. Въпреки факта, че границите, които са създадени с помощта на граничен имотът не е пряко свързано с триъгълник, тя се използва най-често за тази цел.

При определянето на нула височината и ширината на обекта, както и инсталирането на дебела черна линия, можете да видите на площада, който е разделен на четири равни триъгълници. Номерът е, че трябва да се запази само необходимата граница, а другите да направят прозрачни. И сега се оказва, триъгълник, съставен в правилната посока на CSS и цвят.

Създаване на ъгли с помощта на имоти "рамката" е удобен, защото не е необходимо да се направи снимки с помощта на която и редактиране. триъгълни параметри винаги могат да се променят в кода. И това спестява време разработчик. Чрез комбиниране на различните ширината на рамката е лесно достатъчно, за да получите на фигурата. За да се разбере как работи, можете просто да създадете празен елемент с нулева ширина, височина и много дебел рамка с различен цвят от всяка страна. Така че, като трите страни от четирите прозрачни триъгълници са от различни видове:

• триъгълник, гледайки наляво, чиито страни са равни;
• триъгълник, гледайки наляво и повален;
• удължена триъгълник, гледа надясно;
• правоъгълен триъгълник, чиято отляво надясно ъгъл;
• триъгълник гледам надолу;
• триъгълник погледна;
• триъгълник, гледащ надясно, както и много други видове.

Използването psevdoedementov

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

Чрез комбинирането им, разработчиците създават най-различни красиви стрелец, прилагайки имот позиция: относителна към майка елемент. Това се прави с цел да се псевдохаотично не се изнесе от местата си.

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

• бърз и лесен монтаж на размери и цветове, с помощта на имоти;
• поддържа всички браузъри.

минуси:

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

Използване на готови снимки

Следващият метод за създаване на триъгълници - е използването на кодирани изображения. Триъгълникът е съставен предварително, редактор на изображение и се превръща в специален код с специализирани услуги.

Предимството на този метод е, че можете да направите много красив дизайн, с сенки, наклони и рамка и след това просто да го кодира. Но недостатък е фактът, че не всеки е перфектен графични програми. Освен това, ако снимката е много голяма, линията на код се получава, като просто огромна. Това е неудобно за инвеститора.

Отделно перо струва използването на браузъри Internert Explorer стари версии. В тях, методът просто не работи.

Метод обърнати квадратен

Един от начините е да се създаде средство за CSS обърнат квадрат. Има два основни единица. Но някои хора използват псевдо.

Първо, можете да създадете квадрат. Тя ще бъде съдържанието на завъртане. След това го поставяме от 45 градуса, така че тя изглеждаше като диамант. На следващо място, за смяна на предавките-нагоре и външна единица е скрит от преливане на имота: скрит. Това решение също не е крос-браузър, а понякога и на снимката не се показва по желание.

резултати

Така че, има много методи за създаване на триъгълник. Само че не се загуби във всички тези CSS свойства? Референтен в този случай винаги ще помогне. Той описва всички функции на Cascading Style Sheets.

За тези, които не искат да отидат в програмирането и да видите CSS-водач, има онлайн редактори, които генерират триъгълници точните размери и цветове. В визуален редактор, потребителят избира и конфигурира всички цифра настройки. Превърнат генератор триъгълника на CSS код се поставя в отделен прозорец в движение. След това, генерираният код е просто вмъква в стилове и да се поберат на дизайна на страницата.