Триъгълниците на средства CSS

Триъгълниците на CSS инструменти

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

Директно се направи триъгълник с CSS, следователно не може, два метода са на разположение, което позволява тя да се добави - в граничните и трансформира.

Използването на границата

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

Оставянето само дясната граница, а останалата част, като посочи ясно, ние получите желания цвят триъгълник

В Пример 1, показва добавянето на триъгълник към блока чрез псевдо :: след.

Пример 1. Блок триъгълник

За абсолютно позиционирани елементи с нулева ширина и височина не се изисква.

В чужбина комбиниране резултат можете да получите повече четири вида триъгълници, които в комбинация с вече споменатите ни дава осем варианта. Техният външен вид и необходимия код е даден в таблицата.

Възможни видове триъгълници

граница: 20px твърд прозрачен; гранично-ляво: 20px зелено; гранично-отгоре: 20px зелено;

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

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

Пример 2. Остра триъгълник

С границата ние получаваме солидна цветните триъгълници за създаване на рамка е показано на фигурата по-долу е необходимо да отидете на този трик и прилагат един елемент върху друг, с леко отместване. Отново, тук ние помагаме на: преди и: след (Пример 3).

Пример 3. наслагване триъгълници

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

Използване на трансформация

С преобразуването, можем да превърнем квадратен елемент на 45º и да получите от него диамант. Това не е триъгълник като такива, така че искам да се запази изпъкнали част в очите, а останалата част е зад другия елемент (пример 4).

Пример 4. Трансформация

Резултатът от този пример.