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



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

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

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