Четверг, 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

Комментарии  

 
0 #3 Dima 16.05.2017 15:00
спасибо :D
 
 
0 #2 Kate 15.05.2017 07:33
Трапеція сама створена бордерами, тому задати окремий не можна. Хіба що за допомогою псевдоелементів та position: absolute. Причому, якщо потрібно додати границю боковим частинам, то ще й трансформацію потрібно використати.
 
 
0 #1 Dima 13.05.2017 22:47
Здравствуйте!

а как этой трапеции задать собственную границу 1px solid #000?
 

You have no rights to post comments

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