Пятница, 23 Ноября 2012 16:52

Рисуем круг CSS3

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

В продолжение статей о геометрических фигурах (треугольник, трапеция) расскажу как нарисовать круг при помощи CSS свойства border-radius и овал, как более общий случай.

 

Для того, чтобы получить круг, нам нужна заготовка в виде квадрата и CSS свойство border-radius со значением равным половине стороны квадрата:

 

<div style="width: 100px; height: 100px; margin: 20px auto; background: blueviolet; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;">&nbsp;</div>

 

 

 

 

Для рисования овала можно использовать тот же прием, вот только заготовочная фигура не обязательно должна иметь равные стороны:

 

<div style="width: 150px; height: 100px; margin: 20px auto; background: blueviolet; -webkit-border-radius: 70px / 50px; -moz-border-radius: 70px / 50px; border-radius: 70px / 50px;">

 

 

 

 

Здесь использовались разные угла скругления в виде border-radius: 70px / 50p. Такой вариант задает разные радиусы  скругления по горизонтали и по вертикали.

 

 

 

 

Additional Info

You have no rights to post comments

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