Как сделать диагональ квадрата в 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>
Пример диагонали номер 2 квадрата через css
В данном примере мы выведем пример диагонали квадрата номер 2 через css из левого нижнего угла в правый верхний угол.
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: