Как сделать квадрат в css

Как сделать квадрат в css

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 6b84c22f3adb77bc • Your IP : 89.162.247.52 • Performance & security by Cloudflare

CSS-фигуры

Фигуры с помощью CSS — тема богатая и интересная. Помимо базовых фигур, используя тени и псевдоэлементы можно сделать много всякого другого, причем некоторые фигуры можно сделать двумя и более способами.

Все фигуры из этого примера можно сделать на основе одного элемента.

Кольца можно сделать с помощью border или box-shadow , причем во втором случае рамка кольца не увеличивает размер фигуры, а колец может быть несколько и они могут быть смещены относительно друг друга:

Рисуем различные фигуры CSS

Как из квадрата получить прямоугольник, я думаю, объяснять нет нужды, а вот нарисовать круг, к сожалению, без свойства css3 border-radius не получится.

Пример того, что должно получиться:

Немного изменив значения css свойств можем получить из круга овал.

Пример того, что должно получиться:

К сожалению, получить круг и овал в IE 7-8 без хаков не получится. Следует так же учитывать, что чем мельче элемент, тем хуже сглаживание по краям.

Следующий подопытный в нашем списке — треугольник.

Пример того, что должно получиться:

Манипулируя значениями свойств css можно получить довольно причудливые формы треугольников. Обращаю внимание — цвет бордера должен задаваться для большей стороны. Ну и опять же, чем мельче элемент, тем хуже сглаживание по краям, но в отличии от круга и овала работает в ИЕ.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *