В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
line (29)
css (131)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (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 из левого нижнего угла в правый верхний угол.

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.016174 секунд. Подробнее