Css как создать квадрат

Для того, чтобы сделать простой квадрат в css? нам понадобится какой-то блок/элемент, к которому мы прибавим id

Что мы знаем о квадрате!? Что у квадрата все стороны равны! Поэтому сделаем для квадрата высоту(height) и ширину(width) одинаковыми? чтобы могли увидит края квадрата добавим ему бордюр( border: 1px solid):

Простой квадрат через css

Как видим. у нас замечательный простой квадрат через css получился:

Квадрат через css с заливкой фона

Давайте чуть развеселим наш квадрат css, а то уж больно он скучный какой-то получился! Добавим к нашему квадрату , заливку красного цвета -> background: red; , цвет сменим с черного, по умолчанию, на белый -> color: #ffffff;, поставим текст посередине -> text-align: center;

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

квадрат css с заливкой фона

Квадрат css с фоно на задним фоне

Для того, чтобы добавить фото на задний фон квадрата, достаточно поставить свойство background-image:

Итого у нас получится стили для квадрата с фото на заднем фоне:

и да. текст отсюда уберем, потому, что он нам здесь не нужен!

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

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

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

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

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

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

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

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

Квадрат крутится при наведении мышки

Как сделать, чтобы квадрат вращался при наведении мышки на него!?

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

-moz-transition: all 1s ease-out;

-o-transition: all 1s ease-out;

-webkit-transition: all 1s ease-out;

Источник

Создаем геометрические фигуры с помощью CSS

На мой взгляд, одним из интересных нововведений в CSS3 , является возможность использования меньшего количества изображений в веб-дизайне и создание различных фигур.

Все те фигуры, которые вы рисовали ранее в графических редакторах теперь можно сделать с помощью CSS3 . Новые CSS свойства transform и border-radius позволяют делать это, не прибегая к помощи сторонних программ.

В сегодняшнем уроке мы создадим геометрические фигуры, используя только свойства CSS3 .

Что вам понадобится для использования данного руководства

Скачать исходные файлы
Просмотреть демонстрацию

Окружность

HTML
Для создания окружности с помощью CSS , во-первых, мы будем использовать тег div . Именуем его ID именем фигуры. Итак, в первом примере, ID будет равно Circle :

 CSS 
Что касается CSS , просто задаем значения width и height , а затем задаем значение border radius , равное половине от width и height :

Квадрат

HTML
Чтобы создать квадрат в CSS , как и в примере с окружностью, мы создаем div с идентификатором square. Итак, ниже приведен код для блока div :

 CSS 
Для создания квадрата в CSS , просто задаем значения width и height равные друг другу:

Прямоугольник

HTML
Чтобы создать прямоугольную форму, в CSS , как и в случае с квадратом, настраиваем div , где ID равно rectangle :

 CSS 
Так же, как и в случае с квадратом, мы зададим значения width и height , но на этот раз width будет больше, чем height :

Овал

HTML
Для создания овала в CSS , создаем div с ID равным oval :

 CSS 
Овал похож на окружность; овал это прямоугольная форма с заданным радиусом, равным половине значения height :

Треугольник

HTML
И снова, для создания треугольника с помощью CSS , делаем div с ID равным triangle .

CSS
Для создания треугольника мы будем манипулировать свойством border . Изменяя ширину границы, вы получите различные углы поворота:

Треугольник, направленный вниз

HTML
Создаем перевернутый треугольник с помощью CSS . Снова создаем div . ID равно triangle_down :

 CSS 
Создавая перевернутый треугольник, оперируем толщиной границы:

Треугольник, направленный влево

HTML
Для создания треугольной фигуры, которая смотрит влево, снова создаем div с ID triangle_left :

 CSS 
Создавая треугольник, направленный влево, оперируем свойствами границ правой стороны треугольника:

Треугольник, направленный вправо

HTML
Для создания треугольной фигуры, которая смотрит вправо, создаем div с ID triangle_right :

 CSS 
Создавая треугольник, направленный вправо, оперируем свойствами границ правой стороны треугольника:

Ромб

HTML
Для создания фигуры « ромб », создаем div с ID diamond :

 CSS 
Ромб можно создать несколькими способами. Используя свойство transform совместно со значениями свойства rotate , мы можем отобразить два треугольника, расположенных рядом друг с другом:

Трапеция

HTML
Для создания фигуры « трапеция », создаем div с ID равным trapezium .

 CSS 
Трапеция может быть создана методом установки одинаковых значений левой и правой границы с плоской нижней границей:

Параллелограмм

HTML
Для создания фигуры « параллелограмм », создаем div с ID равным parallelogram :

 CSS 
Для создания параллелограмма, устанавливаем значение transform равное skew для поворота элемента на угол в 30 градусов:

Звезда

HTML
Для создания фигуры « звезда », создаем div с ID равным star :

 CSS 
Создание фигуры « звезда » - последовательность странных манипуляций с границами с использованием свойства transform равным rotate . Смотрите код ниже:

#star < width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star:before < height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star:after

Звезда (6ти конечная)

HTML
Для создания фигуры « шестиконечная звезда », создаем div с ID равным parallelogram :

 CSS 
Шестиконечная звезда создается с помощью свойства border . Создаем два набора фигур и комбинируем в одну:

#star_six_points < width: 0; height: 0; display: block; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #de34f7; margin: 10px auto; >#star_six_points:after

Пятиугольник

HTML
Для создания фигуры « пятиугольник », создаем div с ID равным pentagon :

 CSS 
Создание пятиугольника заключается в создании двух элементов, которые затем соединяются в один. Первый элемент – форма трапеции. Затем вверху добавляем треугольную форму:

Шестиугольник

HTML
Для создания фигуры « шестиугольник », создаем div с ID равным hexagon :

 CSS 
Есть несколько способов создания шестиугольника. Один из них полностью идентичен созданию пятиугольника. Создаем прямоугольную форму и вверху добавляем два треугольника:

#hexagon < width: 100px; height: 55px; background: #fc5e5e; position: relative; margin: 10px auto; >#hexagon:before < content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #fc5e5e; >#hexagon:after

Восьмиугольник

HTML
Для создания фигуры « восьмиугольник », создаем div с ID octagon :

 CSS 
Восьмиугольник также интересная фигура. Сначала создаем две трапециевидные формы и по бокам располагаем два треугольника. Есть еще несколько способов, но этот самый действенный:

#octagon < width: 100px; height: 100px; background: #ac60ec; position: relative; >#octagon:before < content: ""; width: 42px; height: 0; position: absolute; top: 0; left: 0; border-bottom: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; >#octagon:after < content: ""; width: 42px; height: 0; position: absolute; bottom: 0; left: 0; border-top: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; >>

Сердце

HTML
Для создания фигуры « сердце », создаем div с ID heart :

 CSS 
Эта фигура довольно сложная в создании, но её можно сделать с помощью вращения элементов под разными углами и смены значения свойства transform-origin для смены позиции вращаемых элементов:

#heart < position: relative; >#heart:before,#heart:after < content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after

Яйцо

HTML
Для создания фигуры « яйцо », создаем div с ID egg :

 CSS 
Концепция фигуры « яйцо » похожа на концепцию фигуры « овал », за исключением свойства height , которое больше, чем width . И особое внимание в этой фигуре придается свойству radius . С помощью подбора его значений можно добиться нужного результата:

Бесконечность

HTML
Для создания фигуры « бесконечность », создаем div с ID infinity:

 CSS 
Фигура « бесконечность » может быть создана путем аккуратной манипуляции свойством border и установки углов окружности:

#infinity < width: 220px; height: 100px; position: relative; >#infinity:before,#infinity:after < content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after

Бабл для комментария

HTML
Для создания фигуры « библ », создаем div с ID comment_bubble :

 CSS 
Эта фигура может быть создана путем создания треугольника и задания свойства border radius , а затем присоединения прямоугольника к его левой стороне:

#comment_bubble < width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; >#comment_bubble:before

Pacman

HTML
Для создания фигуры « pacman », создаем div с ID pacman :

 CSS 
Создание pacman – целая хитрость. Манипулируйте свойствами border и radius для создания окружности с открытой левой стороной:

Заключение

Есть множество возможностей создания фигур с помощью CSS3 . Вы можете использовать фигуры как часть вашего дизайна, к тому же у них есть приемлемый « костыль » в случае браузеров эпохи юрского периода, на подобии Internet Explorer .

Надеюсь, вам понравилось данное руководство. В блоке комментариев вы можете приводить собственные способы создания фигур из руководства.

Подборка курсов по верстке сайтов

4.4 GeekBrains еще 10 курсов

4.4 Нетология еще 5 курсов

4.4 Skillbox еще 11 курсов

4.5 LoftSchool

4.4 HTML Academy

4.2 SkillFactory

Ну а в последнем примере вместо последних четырёх свойств можно было указать одно: border-radius: 70px. Впрочем, возможно, примеры подобраны так, чтоб показать что одни и те же свойства можно задавать иногда разными свойствами.

Чтоб понять как работает восьмиугольник нужно сделать его на белом фоне. Тогда видно, что грани не обрезаются, а просто граница, с помощью которой сделан эффект перехода, совпадает по цвету с фоном, в котором находится восьмиугольник. Для того, чтоб не зависеть от фона, нужно сделать исходным не квадрат, а прямоугольник и к нему приделать две трапеции.
Интересно соотношение размеров. 29 ширина перехода + 42 ширина грани + 29 ширина второго перехода = 100 пикселей, равен квадрату.
При этом, если исходить из того, что грани должны быть равны, то 29 пикселей перехода должны образовывать грань в 42 пикселя. Поскольку 29 пикселей это катет прямоугольного треугольника, а грань — его гипотенуза, то, по теореме Пифагора, 29 в квадрате (841) + ещё столько же (сумма квадратов катетов 1682) должна быть равна 42 в квадрате (1764).
Ну, почти. 🙂

А как сделать параллелограмм, но так чтобы правило наклона не воздействовало на текст?

Источник

Геометрические фигуры на CSS

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

Прямоугольник

Круг

Овал

Треугольник вверх

Треугольник вниз

Треугольник налево

Треугольник направо

Треугольник в левом верхнем углу

Треугольник в правом верхнем углу

Треугольник в левом нижнем углу

Треугольник в правом нижнем углу

Параллелограмм

Трапеция

Звезда (6-конечная)

Звезда (5-конечная)

 #star-five < margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star-five:before < border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star-five:after

Пятиугольник

Шестиугольник

#hexagon < width: 100px; height: 55px; background: red; position: relative; >#hexagon:before < content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; >#hexagon:after

Восьмиугольник

#octagon < width: 100px; height: 100px; background: red; position: relative; >#octagon:before < content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; >#octagon:after

Сердечко

#heart < position: relative; width: 100px; height: 90px; >#heart:before, #heart:after < position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after

Знак бесконечности

#infinity < position: relative; width: 212px; height: 100px; >#infinity:before, #infinity:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after

Источник

doctor Brain

Зная CSS, мы можем создавать фигуры. Отлично зная CSS, мы можем создавть очень крутые и сложные фигуры. Для некоторых из нас рисование с помощью каскадных стилей стало искусством.

В этой статье мы начнем с основ. Изучим процесс создания базовых фигур с помощью CSS:

Квадрат

Начнем с квадрата, который является самой востребованной фигурой, так как является необходимой частью для создания множества других гораздо более сложных фигур и рисунков.

Все просто: нам нужен HTML-элемент с одинаковыми высотой и шириной:

В результате мы получим квадрат:

Прямоугольник

Переходим к следующей фигуре — прямоугольнику. Для этого нам нужно всего лишь увеличить или уменьшить одну из сторон: высоту или ширину.

В результате мы получим прямоугольник:

Круг

Теперь переходим к моей любимой фигуре — кругу. Круг является универсальной фигурой, необходимой для создания кнопок и аватаров.

Создадим фигуру с равными высотой и шириной, как для квадрата, и добавим свойство border-radius .

В результате мы получим круг:

Овал

И, наконец, переходим к овалу. Добавляем все тот же border-raduis , но теперь к прямоугольнику. Для создания овала высота и ширина фигуры должны быть различными.

В результате мы получим овал:

Новые публикации

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

Источник

Css как создать квадрат