Как сделать прямоугольник в html css
Перейти к содержимому

Как сделать прямоугольник в html css

  • автор:

Делаем геометрические фигуры на css

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

Мы также получаем элементы ::beforeи::after psuedo в CSS, которые дают нам возможность еще двух фигур, которые мы можем добавить к исходному элементу. Умничая с позиционированием, трансформацией и многими другими хитростями, мы можем создавать множество фигур в CSS только с одним HTML-элементом.

Круг

Овал

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

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

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

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

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

border-top: 50px solid transparent;

border-right: 100px solid red;

border-bottom: 50px solid transparent;

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

border-top: 50px solid transparent;

border-left: 100px solid red;

border-bottom: 50px solid transparent;

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

border-top: 100px solid red;

border-right: 100px solid transparent;

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

border-top: 100px solid red;

border-left: 100px solid transparent;

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

border-bottom: 100px solid red;

border-right: 100px solid transparent;

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

border-bottom: 100px solid red;

border-left: 100px solid transparent;

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

Фигуры в CSS

Как быстро нарисовать несколько фигур с помощью CSS и одного элемента HTML.

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

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

.rectangle

Квадрат

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

.square

И это бы сработало, но. Если мы хотим изменить размер нашего квадрата, нам нужно будет каждый раз обновлять два значения. Это не большая проблема, но в CSS есть свойство aspect-ratio , которое позволяет нам указывать соотношение между шириной и высотой. Установка значения 1или ( 1 / 1как в видео) также приведет к появлению квадрата с теми же строками кода, но теперь нам нужно обновить только одну строку кода, чтобы изменить его размер:

.square

Круг

Начиная с квадрата, нам нужно задать округлую форму. Мы достигаем этого, используя border-radius и присваивая ему значительное процентное значение (подойдет 50% или выше). Очень просто.

.circle

Эллипс

Эллипс — это округлая форма, похожая на круг, но вместо квадрата он основан на прямоугольнике. (Есть более точное и техническое определение эллипса, но я пока остановлюсь на этом.) Итак, мы добавим свойство, border-radius подобное кругу, но к прямоугольнику, а не к квадрату.

.ellipse

Овал/Яйцевидный

Овал и эллипс — это не одно и то же. Существует несколько технических определений того, пересекаются ли внутренние круги или нет, но для простоты будем считать, что овал напоминает яйцо. Мы достигаем этой формы, используя оба значения border-radius свойства. Да, существует два набора по 4 значения каждый: горизонтальные радиусы, затем вертикальные радиусы, разделенные косой чертой ( / ).

Мы установим горизонтальные радиусы на 100% , затем укажем большие значения вертикальных радиусов для верхних углов и меньшие значения для нижних углов. Что-то вроде этого:

.oval < width: 300px; height: 400px; background: black; border-radius: 100% / 120% 120% 75% 75%; >

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

Колокольчик

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

Если вы создаете CSS Art, эта форма может быть удобна для тел и даже лиц (слегка отрегулировав значения радиусов).

.bell < width: 300px; height: 400px; background: black; border-radius: 100% / 160% 160% 25% 25%; >

Арка

Небольшая вариация эллипса и колокола: арка плоская внизу и изогнутая вверху. Здесь нельзя играть со значениями; мы можем просто установить для свойства border-radius фиксированное значение:

.arch < width: 300px; height: 400px; background: black; border-radius: 50% / 100% 100% 0% 0%; >

При таком подходе, если ширина элемента в два раза превышает высоту, мы получим полукруг вместо дугообразной формы.

Глаз

Первая форма из трех, требующих небольшого вращения. Мы начнем с квадрата, а затем установим радиус границы для двух противоположных углов, оставив два других угла равными нулю. Я всегда начинаю с верхнего левого угла и добавляю поворот на 45 градусов, но вы можете выбрать любой другой угол и соответствующим образом отрегулировать поворот.

Вы можете использовать rotate: 45deg собственность или также transform: rotate(45deg) . В любом случае будет работать. Что касается радиуса границы, то чем выше значение, тем мягче будет кривизна глаза (дублируйте значения, чтобы одна сторона была выше другой: 80% 0 100% 0 ).

Слеза

Забавно, что форма слезы — это вариация формы глаз. Тот же код, только изменение радиуса границы: максимально увеличьте три радиуса, чтобы получить круглую форму, и оставьте последний угловой радиус равным нулю, чтобы он заканчивался точкой.

.tear

Сердце

Рисование сердца немного отличается от предыдущих фигур, так как в нем будут использоваться как элемент, так ::before и ::after псевдоэлементы. Начинаем с квадрата, поворачиваем его на 45 градусов, а затем добавляем псевдоэлементы в виде кругов (см. выше). Мы переводим один псевдо-горизонтально, а другой вертикально (который будет выглядеть по диагонали для обоих при вращении элемента), и все готово. Код может показаться «сложным», но идея проста.

.heart < width: 300px; aspect-ratio: 1; background: black; rotate: 45deg; position: relative; >.heart::before, .heart::after < content: ""; position: absolute; width: 100%; aspect-ratio: 1; border-radius: 50%; background: inherit; translate: -50% 0; >.heart::after

Треугольник

Во многих онлайн-статьях обсуждается, как нарисовать треугольник, используя границы, нулевую высоту/ширину и некоторые прозрачные цвета. Я бы крайне не рекомендовал такой подход. Хотя это работает, это старомодно и может стать проблемой, если мы хотим гибкости и оперативности.

Вместо этого я рекомендую использовать clip-path для рисования треугольник и некоторые из следующих многоугольных фигур. С помощью clip-path мы указываем путь (это может быть многоугольник, изображение, реальный путь и т. д.), который определяет форму. Все, что находится за пределами этой фигуры, будет обрезано. В случае треугольника нам нужно всего 3 точки.

.triangle

Трапеция

Еще один полигон. Которые легко сделать с помощью polygon() функции в clip-path . В данном случае мы начнем с прямоугольника или квадрата, и нам понадобятся четыре точки: нижние будут в углах, а верхние – немного внутри. И мы закончили

.trapezoid

Октагон

Я сделал восьмиугольник, потому что это легко сделать (не нужно ничего вычислять или использовать тригонометрию). Хорошей новостью является то, что метод clip-path / polygon() можно экстраполировать на любую многоугольную форму.

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

.octagon

Искра

Искра – это вариант восьмиугольника. Разница лишь в том, где будут расположены четыре точки. Находясь в восьмиугольнике, они обращены наружу; в искре они будут внутрь (представьте себе повернутый квадрат).

.spark

Для более крутого эффекта примените форму не к элементу самому по себе, а к обоим ::before и ::after псевдоэлементам. Затем поверните один на 45 градусов (он будет выглядеть лучше, если этот поворот применить к ::before .)

Луна

Луна может принимать разные формы. Под формой луны мы подразумеваем серп (или убывающий). Мы можем быстро добиться этого, начав с круглой формы и применив расширение box-shadow. Тени блока допускают пять значений: горизонтальное перемещение, вертикальное перемещение, нечеткость (необязательно), масштаб (необязательно) и цвет (необязательно, цвет текста по умолчанию). В зависимости от того, хотим ли мы полумесяц или убыль, мы добавим большую тень справа или слева.

.moon

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

.moon

Пятно/Всплеск

Эта форма сложнее всех остальных в этом списке. Я написал более подробную статью о том, как его создать (включая пошаговое видео). Идея состоит в том, чтобы иметь повторяющиеся конические градиенты и применять фильтры, чтобы они выглядели гладкими.

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

.stain < width: 300px; height: 300px; background: repeating-conic-gradient(#000 0 3%, #0000 0 11%), repeating-conic-gradient(#0000 0 5%, #000 0 7%) 50% / 60% 60%, repeating-conic-gradient(#0000 0 7%, #000 0 9%) 50% / 70% 70%, repeating-conic-gradient(#0000 0 11%, #000 0 13%) 50% / 80% 80%, radial-gradient(#000 22%, #0000 0), #fff; mix-blend-mode: darken; filter: blur(10px) contrast(100) brightness(1) grayscale(1); box-shadow: 0 0 0 50px #fff; >

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

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

Квадрат

#square

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

#rectangle

Круг

#circle

Овал

#oval < width: 200px; height: 100px; background: red; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; >

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

#triangle-up

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

#triangle-down

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

#triangle-left

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

#triangle-right

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

#triangle-topleft

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

#triangle-topright

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

#triangle-bottomleft

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

#triangle-bottomright

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

#parallelogram

Трапеция

#trapezoid

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

#star-six < width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; >#star-six:after

Звезда (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

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

#pentagon < position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: red transparent; >#pentagon:before

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

#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

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

Как известно из курса геометрии, прямоугольник — четырёхугольник, у которого все углы прямые (равны 90 градусам). Для того чтобы сформировать прямоугольник в CSS достаточно чтобы у блока высота и ширина были разные. Рассмотрим пример:

Исходный HTML документ

 class="container">  class="rectangle-1">
class="rectangle-2">
class="rectangle-3">
/* расположим все фигуры в ряд, добавим между ними отступ */ .container  display: flex; gap: 20px; > /* стили прямоугольников */ .rectangle-1  background-color: #cc5de8; height: 100px; width: 120px; > .rectangle-2  background-color: #339af0; height: 75px; width: 100px; > .rectangle-3  background-color: #38d9a9; height: 50px; width: 75px; > 

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

Результат

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *