Четверг, 22 Ноября 2012 14:40

Делаем треугольник при помощи CSS

Written by 
Оцени эту запись
(3 Голоса)

При помощи простого приема сделаем треугольник на CSS.

 

Фишка заключается в задании границы блока, причем граница должна быть очень большой по отношению к размерам блока и ее часть должна быть прозрачной.

 

Рассмотрим для начала вид блока маленького размера с большими границами:

 

<div style="width: 5px; height: 5px; background: #fff; border-top: 20px solid #ccc; border-right: 20px solid #999; border-bottom: 20px solid #666; border-left: 20px solid #333;">&nbsp;</div> 

 

 

 

 

А теперь усугубим этот эффект:

 

<div style="width: 0px; height: 0px; background: #fff; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid #333; border-left: 20px solid #333;">&nbsp;</div> 

 

 

 

 

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

 

<div style="width: 0px; height: 0px; background: #fff; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 6px solid #666; border-left: 58px solid #666;">&nbsp;</div>

 

 

 

 

Ну или так:

 

<div style="width: 0px; height: 0px; background: #fff; border-top: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 101px solid #666; border-left: 147px solid transparent;">

 

 

 

 

 

В следующие статье рассмотрим рисование трапеции на CSS.

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов