Как сделать диагональ квадрата в css?

Подробно о диагонали квадрата в css

1. Диагональ квадрата css.
2. Пример диагонали квадрата css.

Скопировать ссылку



Диагональ квадрата css.

Для того, чтобы нарисовать диагональ в квадрате с помощью css нам понадобится...

Создадим какой-то элемент - пусть это будет div

Дадим ему класс = "square".

<div class="square"></div>

Диагональ создаем с помощью псевдо элемента before

Код примера диагонали квадрата через css

<style>

.square{

background-color: #e5e5e5;

width: 460px;

height: 460px;

padding: 0;

margin: 0;

border: 0px;

}

.square:before {

content: "";

position: absolute;

width: 650px;

height: 650px;

transform: rotate(45deg);

border-bottom: 1px solid;

margin: -325px 0 0 135px;

}

</style>

Пример диагонали квадрата через css

Диагональ с верхнего левого угла в правый нижний угол:



Скопировать ссылку



Пример диагонали квадрата css.

Во втором примере сделаем диагональ квадрата через css из левого нижнего угла в правый верхний угол.

Html блок для диагонали квадрата css

<div class="square1"></div>

Немного изменим стили для нашей новой диагонали :

Код примера номер 2 диагонали квадрата через css

<style>

.square1{

background-color: #e5e5e5;

width: 460px;

height: 460px;

padding: 0;

margin: 0;

border: 0px;

}

.square1:before {

content: "";

position: absolute;

width: 650px;

height: 650px;

transform: rotate(135deg);

border-bottom: 1px solid;

margin: 135px 0 0 135px;

}

</style>

Пример диагонали номер 2 квадрата через css

В данном примере мы выведем пример диагонали квадрата номер 2 через css из левого нижнего угла в правый верхний угол.

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---