Сделать квадратики в html

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

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

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

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

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

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

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

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

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

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

Читайте также: How to active java

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

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

Задачка — вписать квадрат в квадрат 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

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом 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

Источник

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

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «CSS Shapes Explained: How to Draw a Circle, Triangle, and More Using Pure CSS».

Вы только начинаете изучать веб-разработку и CSS? Вам случалось задуматься, как же создаются все эти прекрасные фигуры, которые можно видеть повсеместно в интернете? Можете больше не терзаться этим вопросом: вы пришли по нужному адресу.

Ниже я объясню самые основы создания геометрических фигур при помощи CSS. Тема эта большая, рассказывать можно очень долго. Поэтому я не буду даже пытаться охватить все инструменты и фигуры. Лучше я дам вам общую идею того, как эти фигуры создаются при помощи CSS.

Создание некоторых фигур требует большего количества приемов, чем создание других. Но вообще для создания фигур при помощи CSS обычно используется комбинация width, height, top, right, left, border, bottom, transform и псевдоэлементов, таких как :before и :after. У нас также есть и более современные CSS-свойства для создания фигур, такие как shape-outside и clip-path. О них я тоже напишу.

CSS-фигуры — базовый способ создания

Мы всегда можем создать самые основные геометрические фигуры (квадраты, круги и треугольники), используя обычные свойства CSS и несколько интересных приемов.

Квадраты и прямоугольники

Создавать квадраты и прямоугольники, пожалуй, проще всего. По умолчанию, div это всегда квадрат или прямоугольник.

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

square < background: lightblue; width: 100px; height: 100px; >

Круги

Почти так же просто создать круг. Для этого мы можем установить border-radius элемента. Таким образом мы сделаем скругление углов.

Если мы установим значение этого свойства на 50%, мы получим круг. А если при этом ширина и высота будут разными, получится овал.

circle < background: lightblue; border-radius: 50%; width: 100px; height: 100px; >

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

Создавать треугольники немного сложнее. Нам нужно установить границы элемента, чтобы они образовали треугольник. Если элементу установить нулевую ширину и высоту, его шириной станет ширина границы.

Имейте в виду, что края границы элемента находятся под углом в 45 градусов друг к другу. Вот почему этот метод подходит для создания треугольника. Если мы зададим одной границе цвет, а другим границам прозрачность, мы получим треугольник.

triangle < width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 80px solid lightblue; >

Если вам нужно, чтобы вершина треугольника была повернута в другом направлении, вы можете изменить значения border для той стороны, которая должна быть видимой. Или можно повернуть элемент при помощи свойства transform — если вам так больше нравится.

triangle < width: 0; height: 0; border-top: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; >

Это базовые фигуры, которые можно создать при помощи CSS. А вообще количество фигур, которые можно себе представить, пожалуй, безгранично. То, что я рассказал, это лишь основы, но проявив творческий подход и упорство, вы сможете достигнуть многого даже с этими базовыми свойствами CSS.

В некоторых случаях, когда речь идет о создании более продвинутых фигур, будет хорошей идеей использовать псевдоэлементы :after и :before.

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

На иллюстрации вы видите треугольник и то, каким образом его обтекает текст.

К счастью, вместо такого подхода мы можем использовать некоторые современные свойства CSS.

CSS-фигуры — другой способ создания

Сегодня мы можем использовать такое свойство CSS как shape-outside. Это свойство позволяет нам определять фигуру, которую должен обтекать текст (или в которую он должен вписываться). Для этого свойства у нас есть несколько базовых фигур:

Совет! Вы также можете использовать свойство clip-path. С его помощью тоже можно создать нужную фигуру, но это свойство не позволит вам сделать обтекание текстом вокруг фигуры, как при использовании shape-outside.

Элемент, которому мы собираемся придать форму геометрической фигуры, должен быть плавающим (floated) и иметь определенную ширину и высоту. Это очень важно!

inset()

Базовая фигура inset() используется для создания прямоугольника или квадрата со смещением для обтекания текстом. Вы можете указать, насколько именно текст должен перекрывать фигуру.

Смещение можно установить одинаковое по всем направлениям: inset(20px). Также его можно указывать отдельно для каждого направления: inset(20px 5px 30px 10px).

Можно использовать и другие единицы для смещения, например, проценты. Значения указываются в таком порядке: inset(top right bottom left).

square < float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px); background: lightblue; >

Также можно указать для inset() второе значение, определяющее border-radius смещения. Как здесь:

square < float: left; width: 100px; height: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); background: lightblue; >

circle()

В этом случае при помощи свойства shape-outside создается круг. Здесь также нужно применить clip-path с соответствующим значением.

Свойство clip-path может принимать те же значения, что и свойство shape-outside, так что мы можем задать стандартную фигуру circle(), которую мы использовали для shape-outside. Обратите внимание, что я применил для элемента margin 20px, чтобы дать тексту немного пространства.

circle < float: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; >

В этом примере я не указывал радиус круга. Я хотел, чтобы его размер совпадал с div (300px). Если хотите задать кругу его собственный размер, это тоже можно сделать.

Свойство circle() принимает два значения. Первое это радиус, а второе — позиция. Эти значения определяют центр круга.

В примере, приведенном ниже, я установил радиус в 50%. Затем я сместил центр круга на 30%. Обратите внимание, что между значениями радиуса и позиции должно использоваться слово «at».

Я также указал другое значение позиции для clip-path. Поскольку я задал позицию 0%, это обрежет круг наполовину.

circle < float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50% at 30%); clip-path: circle(50% at 0%); background: lightblue; >

ellipse()

Свойство ellipse() работает так же, как и circle(), за исключением того, что в итоге создает не круг, а овал. Вы можете задавать значение X и значение Y: ellipse(25px 50px).

Как и в случае с кругом, последнее значение это позиция.

ellipse < float: left; width: 150px; height: 150px; margin: 20px; shape-outside: ellipse(20% 50%); clip-path: ellipse(20% 50%); background: lightblue; >

polygon()

Многоугольник это фигура с разными координатами. Ниже я создал фигуру в форме буквы «Т». Я начал с координат 0,0 и двигался слева направо.

polygon < float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, 40% 100%, 40% 20%, 0 20% ); background: lightblue; >

Изображения

Для создания фигур можно также использовать изображения с прозрачным фоном. Например, как эта прекрасная круглая луна. Это изображение в формате .png, с прозрачным фоном.

moon < float: left; width: 150px; height: 150px; shape-outside: url("./src/moon.png"); >

Источник

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

Hobo 2022-07-25 в Вебмастер Комментариев: 2

Последнее обновление — 15 января 2023 в 15:02

Сегодня, благодаря возможностям языка описания внешнего вида HTML-документа, имеется возможность создавать самые разнообразные геометрические фигуры на чистом CSS. Каскадные таблицы стилей позволяют получить и квадрат, и круг, и треугольник, стрелку, звезду и даже цветок или сердечко, а также много других фигур.

Окружность
Квадрат
Прямоугольник
Овал
Треугольник
Треугольник, направленный вершиной вниз
Треугольник, направленный вершинкой влево
Треугольник, направленный вправо
Ромб
Ещё один ромб
Трапеция
Параллелограмм
Звезда
Шестиконечная звезда
Пятиугольник
Шестиугольник
Восьмиугольник
Сердце
Яйцо
Бесконечность
Бабл (облачко) для комментария
Pacman
Лупа
Флажок
Крест
Стрелка
Конвертик или домик
Полумесяц

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

При помощи CSS и HTML возможно создавать не только статичные фигуры. Им можно придавать движение. Посмотрите, например, как сделать анимацию стрелки-маятника. Или как украсить свой сайт новогодней мигающей гирляндой на HTML и CSS.

В этой подборке будут представлены результаты работы кода при создании некоторых распространённых геометрических фигур. Это удобно при создании баннеров и других элементов в дизайне сайта.

Окружность

Чтобы создать окружность с помощью CSS, воспользуемся тегом div. И зададим значение “circle” для идентификатора.

Источник