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

16.02.2022 Марат 1051 css | line | css_shape |

"Диагональ квадрата css" - можно ли нарисовать диагональ квадрата в css?

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

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

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

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

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

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

Диагональ создаем с помощью псевдо элемента 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

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

Код примера номер 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>