СКРИПТЫ
ТЕГИ:
php (284)
js (166)
html (138)
css (116)
html tags (61)
jquery (40)
edit text (37)
php array (30)
form html (29)
fonts (27)
ruweb.net (23)
foto (22)
online (20)
atom (20)
forum (19)
svg (18)
Показать еще :
board (17)
hosting (17)
php file (16)
html book (16)
js method (16)
input (15)
color (15)
php date (15)
link (15)
js events (14)
osclass (13)
table (13)
htaccess (13)
path (12)
js delete (12)
dw block (12)
select (12)
download (11)
icon (11)
jsphp (11)
php time (11)
img (11)
keyboard (11)
notepad (11)
php img (11)
form (11)
url (10)
mouse (10)
yandex (9)
info (9)
js time (9)
task (7)
dosite (7)
php url (7)
hover (7)
cookie (7)
comment (7)
js url (6)
mysql (6)
list (6)
year (6)
click (6)
iframe (6)
ftp (5)
search (5)
chart (5)
browser (5)
php get (5)
mb (5)
js id (5)
value (5)
adminka (5)
heading (5)
mounth (4)
bbcode (4)
symbols (4)
vk (4)
day (4)
console (4)
js form (4)
reg.ru (4)
submit (4)
week (4)
js img (3)
line (3)
captcha (3)
ucoz (3)
https (3)
js post (3)
ssl (3)
padding (3)
vs code (3)
scandir (3)
pages (3)
рся (2)
second (2)
money (2)
youtube (2)
video (2)
js vars (2)
seo (2)
typeof (2)
sitemap (2)
title (2)
tag hr (2)
cursor (2)
counter (2)
arrows (2)
base64 (2)
qr kod (2)
details (2)
height (2)
куб (1)
books (1)
scroll (1)
domen (1)
numbers (1)
google (1)
header (1)
windows (1)
smile (1)
speed (1)
archive (1)

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

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

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

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

  1. Диагональ квадрата 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

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



  2. Пример диагонали квадрата 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
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

Последние комментарии :
вывы :
05.06.2022 12:32
сейчас яндекс добавил индексацию js в…
подробнее.
Марат :
02.06.2022 20:14
Михаил :
02.06.2022 20:10
Ну вот только для этого может быть ;) А так, нет смысла…
подробнее.
Марат :
02.06.2022 15:59
Чтобы вы зашли на данную страницу и нажали на…
подробнее.
Михаил :
02.06.2022 14:33
Ну вот только для этого может быть :) А так, нет смысла…
подробнее.
Алексей :
26.05.2022 14:19
👍👍👍
подробнее.
ruweb
Страница загружена за : 0.016514 секунд. Подробнее