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

Трапеция на CSS

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

В предыдущей статье мы делали треугольник на CSS, а теперь сделаем трапецию, используя тот же метод CSS.

 

 

Напомню, что в предыдущей статье мы использовали соотношение размера блока и размеров его границ. В случае с трапецией, в отличие от треугольника, мы добавим размера блока:

 

 

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

 

 

 

Для равносторонней трапеции сделаем одинаковые размеры левой и правой границ:

 

<div style="width: 70px; height: 0px; background: #fff; border-top: 20px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blueviolet; border-left: 50px solid transparent;">

 

 

 

 

Думаю, идея понятна))

 

 

 

Additional Info

You have no rights to post comments

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