DWWEB.RU
СКРИПТЫ

Квадрат css. Квадрат в квадрате

Мы продолжаем и фигурах – сегодня мы о квадрате! Но не просто о скучном квадрате но и решим задачку, как вписать квадрат в квадрат!

Как нарисовать квадрат в css

1.

Квадрат нарисовать в css довольно просто и не замысловато…

Код квадрата:

#kvadrat {

width: 100px;

height: 100px;

background: red;

color: #ffffff;

text-align: center;

}

Результат:

Простой квадрат

2.

Задачка - вписать квадрат в квадрат css

Мы вступаем в мою любимую стезю – математика! И вписать квадрат в квадрат не получится без знания математики!

Чтобы вписать квадрат в квадрат надо решить математическую задачку!

1. У нас есть выше идущий квадрат, сторона которого равна 100px.
2. Диагональ вписываемого квадрата равна будет 100px
3. Диагональ равна - d = a√2 , где a – сторона квадрата и далее выведем чему она равна - a² = d²/ 2 , => a = √d²/ 2 отсюда мы получим 70,71, но из опыта моего возьмем меньше чем больше – т.е. сторона будет равна 70px
4. Нам остаётся от позиционировать его по месту и повернуть на 45 градусов.

#kvadrat_2 {

position: absolute;

margin-left: 15px;

margin-top: 15px;

width: 70px;

height: 70px;

background: black;

-webkit-transform: rotate(45deg);

color: #ffffff; }

Результат:

Квадрат в квадрате

3.

border css квадрат со скругленными

И последнее - не посмотреть, что ищу т пользователи со словом квадрат css - я естественно не мог! И один из запросов border css квадрат со скругленными.

Ну что ж – давайте и это сделаем!

Все просто!

Для первого кода нужно добавить border-radius

#kvadrat_3 {

width: 100px;

height: 100px;

background: red;

color: #ffffff;

text-align: center;

border-radius: 10px;

}

Результат:

border css квадрат со скругленными
Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
квадрат css как сделать квадрат в css border css квадрат со скругленными

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019