CSS фигуры
Очередная порция впечатляющих возможностей CSS — коллекция фигур на чистом CSS. Никаких картинок в Фотошопе и сложной разметки. С помощью псевдоэлементов, рамок и теней можно создавать сложные css-фигуры на основе всего лишь одного html-элемента.
1. Круг
2. Овал
3. Треугольник вершиной вверх
4. Треугольник вершиной вниз
5. Треугольник вершиной влево
6. Треугольник вершиной вправо
7. Верхний левый угол
8. Верхний правый угол
9. Нижний левый угол
10. Нижний правый угол
11. Трапеция
12. Параллелограмм
13. Шестиугольная звезда
.d13 < width: 0; height: 0; margin-bottom: 30px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #374F9C; position: relative; >.d13:after
14. Пятиугольная звезда
.d14 < margin: 50px 0; height: 0; width: 0; position: relative; border-right: 50px solid transparent; border-bottom: 35px solid #E7337A; border-left: 50px solid transparent; transform: rotate(35deg); >.d14:before, .d14:after < content: ""; height: 0; width: 0; position: absolute; >.d14:before < top: -26px; left: -32px; border-bottom: 40px solid #E7337A; border-left: 15px solid transparent; border-right: 15px solid transparent; transform: rotate(-35deg); >.d14:after
15. Стрелка
.d15 < width: 60px; height: 20px; margin: 10px 0; background: #B74388; position: relative; >.d15:after
16. Шестиугольник
.d16 < margin: 20px 0; width: 100px; height: 55px; background: #F1CCAE; position: relative; >.d16:before, .d16:after < content: ""; width: 0; height: 0; position: absolute; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; >.d16:before < top: -25px; border-bottom: 25px solid #F1CCAE; >.d16:after
17. Восьмиугольник
.d17 < width: 100px; height: 100px; background: #54999A; position: relative; >.d17:before, .d17:after < content: ""; width: 42px; height: 0; position: absolute; left: 0; border-left: 29px solid white; border-right: 29px solid white; >.d17:before < top: 0; border-bottom: 29px solid #54999A; >.d17:after
18. Сердце
.d18 < position: relative; width: 100px; height: 80px; >.d18:before, .d18:after < content: ""; position: absolute; left: 50px; top: 0; width: 50px; height: 80px; background: #EE4156; border-radius: 50px 50px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; >.d18:after
19. Ромб
.d19 < width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #53BA88; position: relative; top: -50px; >.d19:after
20. Ромб
.d20 < margin-bottom: 20px; width: 0; height: 0; border: 50px solid transparent; border-bottom: 70px solid #47002D; position: relative; top: -50px; >.d20:after
21. Символ Инь-Ян
.d21 < width: 100px; height: 50px; background: white; border-color: black; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 50%; position: relative; >.d21:before, .d21:after < content: ""; width: 12px; height: 12px; position: absolute; top: 50%; border-radius: 50%; >.d21:before < left: 0; background: white; border: 19px solid black; >.d21:after
22. Пакман
23. Домик с крышей
.d23 < height: 55px; width: 100px; margin: 35px 20px 0 0; background: #B1BA5C; position: relative; >.d23:before
Делаем геометрические фигуры на 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
Подпишись на наш телеграм-канал 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. Это свойство позволяет нам определять фигуру, которую должен обтекать текст (или в которую он должен вписываться). Для этого свойства у нас есть несколько базовых фигур:
- inset()
- circle()
- ellipse()
- polygon()
Совет! Вы также можете использовать свойство 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 Shapes
CSS Shapes позволяет создавать интересные и уникальные макеты, определяя геометрические фигуры, изображения и градиенты, вокруг которых может обтекать текстовое содержимое.
До появления CSS Shapes для веб-страниц было практически невозможно разработать дизайн в виде журнального макета со свободно обтекаемым текстом. Напротив, макеты веб-дизайна традиционно формируются с помощью сеток, прямоугольников и прямых линий.
CSS Shapes позволяет определить геометрические фигуры, вокруг которых обтекает текст. Такими фигурами могут быть круг, эллипс, простые или сложные многоугольники, а также изображения и градиенты. На практике CSS Shapes позволяет отображать круговой текст вокруг круглого аватара; выводить текст поверх части полноразмерного фонового изображения; отображать текст, обтекающий буквицы в статье.
Теперь, когда CSS Shapes получили широкую поддержку в современных браузерах, стоит взглянуть на гибкость и функциональность, которые предоставляет CSS Shapes. Это позволит понять, имеет ли смысл включить фигуры в дизайн вашего следующего проекта.
Внимание! CSS Shapes поддерживают браузеры Firefox, Chrome, Safari и Opera, а также мобильные браузеры, такие как iOS Safari и Chrome для Android. CSS Shapes не поддерживает IE и пока находится на рассмотрении в Microsoft Edge.
Первый взгляд на CSS Shapes
Текущая реализация CSS Shapes — это CSS Shapes Module Level 1, она в основном вращается вокруг свойства shape-outside . Это свойство определяет фигуры, вокруг которых может обтекать текст.
Учитывая, что есть свойство shape-outside, можно предположить, что существует и соответствующее свойство shape-inside, которое будет содержать текст внутри фигуры. Свойство shape-inside может стать реальностью в будущем, но в настоящее время оно является черновым в CSS Shapes Module Level 2 и не реализовано ни в одном браузере.
В этой статье мы продемонстрируем, как использовать базовые фигуры и задать их значения, а также как установить фигуру с помощью полупрозрачной картинки или градиента.
Базовые фигуры
Мы можем определить все виды базовых фигур в CSS, применяя следующие значения функций к свойству shape-outside :
- circle()
- ellipse()
- inset()
- polygon()
Чтобы добавить свойство shape-outside к элементу, он должен быть обтекаемым, а также у него должна быть установлена высота и ширина. Давайте рассмотрим каждую из четырёх основных фигур и продемонстрируем, как их можно использовать.
circle()
Начнём с функции circle() . Представьте себе ситуацию, что у нас есть круглый аватар автора, который мы хотим выровнять по левому краю и чтобы текст с описанием автора обтекал его. Для придания тексту круглой формы недостаточно использовать border-radius: 50% на элементе аватара; текст по прежнему будет считать аватар прямоугольным элементом.
С помощью circle() мы можем продемонстрировать, как текст может обтекать по кругу.
Начнём с создания класса circle для обычного элемента и добавим несколько абзацев (я использовала цитаты Боба Росса в качестве рыбы).
Для нашего класса circle мы добавляем float со значением left , присваиваем ему одинаковую высоту и ширину и устанавливаем значение shape-outside как circle() .
.circle
Если взглянем на веб-страницу, она будет выглядеть так.
Как видите, текст обтекает по кругу, но в действительности никакой фигуры не видно. Если навести курсор на элемент в Инструментах разработчика, то увидим фактическую фигуру, которая будет установлена.
Если задать цвет фона или изображение для элемента, то вы увидите фигуру. Давайте попробуем это сделать.
.circle
К сожалению, установка фона для circle даёт нам прямоугольник, то самое, чего мы пытались избежать.
Мы можем ясно видеть обтекающий текст, но не саму фигуру элемента. Если желаем её отобразить, то нужно использовать свойство clip-path . Это свойство принимает те же значения, что и shape-outside , поэтому можем присвоить ему значение circle() .
.circle
В остальной части статьи я буду использовать clip-path , чтобы это помогло определить фигуру.
Функция circle() принимает необязательный параметр радиуса. В нашем случае радиус по умолчанию (r) составляет 50% или 100px. Использование circle(50%) или circle(100px) даст тот же результат, что мы уже сделали.
Можно заметить, что текст располагается сразу возле фигуры. Мы можем использовать свойство shape-margin , чтобы добавить поле к фигуре; значение может быть задано в px, em,% или в любой другой стандартной единице измерения CSS.
.circle
Вот пример circle() с радиусом 25% и добавлением shape-margin .
В дополнение к радиусу функция принимает позиционирование через at . Положение по умолчанию — центр круга, поэтому circle() будет явно записан как circle(50% at 50% 50%) или circle(100px at 100px 100px) ; значениями являются горизонтальное и вертикальное положение, соответственно.
Чтобы стало понятно как работает позиционирование, мы можем установить значение горизонтального положения равным 0 и получить идеальный полукруг.
circle(50% at 0 50%);Эта координатная система позиционирования известна как связанный блок.
Позже мы узнаем, как использовать изображение вместо фигуры или градиента. А теперь перейдём к следующей фигуре.
ellipse()
Похожей на circle() является функция ellipse() , которая создаёт эллипс. Для демонстрации добавим элемент с классом ellipse .
Пример текста. .ellipse
На этот раз мы установили разную высоту и ширину, чтобы сделать вертикально вытянутый овал.
Разница между ellipse() и circle() заключается в том, что эллипс имеет два радиуса— rx и ry или радиус по оси X и радиус по оси Y. Поэтому приведённый выше пример можно записать в таком виде:
ellipse(75px 150px);Параметры позиционирования одинаковы для кругов и эллипсов. Радиусы, помимо того, что они являются единицей измерения, также включают farthest-side и closest-side .
closest-side указывает на длину от центра до ближайшей стороны связанного блока и наоборот, farthest-side указывает на длину от центра до самой дальней стороны связанного блока. Эти два значения не действуют, если не установлено положение, отличное от значения по умолчанию.
Вот демонстрация разницы перестановки closest-side и farthest-side для ellipse() со смещением на 25% по осям X и Y.
ellipse(farthest-side closest-side at 25% 25%)
ellipse(closest-side farthest-side at 25% 25%)
inset()
До сих пор мы имели дело только с круглыми фигурами, но можем вставлять и прямоугольники с внутренним отступом через функцию inset() .
Пример текста. .inset
В этом примере мы создаём прямоугольник размером 300px на 300px и отступом 75px со всех сторон. В итоге получится 150px на 150px с пространством вокруг 75px.
Мы можем видеть как вставлен прямоугольник, а текст игнорирует внутреннее пространство.
inset() также может принимать параметр border-radius со значением радиуса и текст будет учитывать скруглённые уголки, как в этом примере с 25px со всех сторон и скруглением 75px.
inset(25px round 75px)
Подобно свойствам padding или margin , inset() принимает значение top right bottom left по часовой стрелке ( inset(25px 25px 25px 25px) ), использование только одного значения установит все четыре стороны одинаковыми ( inset(25px) ).
polygon()
Наиболее интересной и гибкой из функций является polygon() , который может принимать массив точек x и y для создания любой сложной фигуры. Каждый элемент в массиве представляет xi yi и будет записан как polygon(x1 y1, x2 y2, x3 y3. ) и т. д.
Наименьшим количеством наборов точек, которые мы можем применить к polygon() , является три, что создаёт треугольник.
Пример текста. .polygon
В этой фигуре первая точка — 0 0, самая левая верхняя точка . Вторая точка — 0 300px, это самая левая нижняя точка . Третья и последняя точка — 200px 300px, что составляет 2/3 по оси X и снизу. Получившаяся фигура выглядит так:
Интересное использование функции polygon() заключается в том, что текстовое содержимое может располагаться между двумя или более фигурами. Поскольку фигура polygon() очень гибкая и динамичная, это одна из самых больших возможностей для создания действительно уникальных макетов в журнальном стиле. В данном примере мы поместим текст между двумя многоугольниками.
div Пример текста. .left < float: left; shape-outside: polygon(0 0, 0 300px, 200px 300px); clip-path: polygon(0 0, 0 300px, 200px 300px); background: linear-gradient(to top right, #67D7F5, #86F7CC); height: 300px; width: 300px; >.right
Очевидно, вручную довольно трудно пытаться создать свои собственные сложные фигуры. К счастью, есть несколько инструментов, которые вы можете использовать для создания многоугольников. Firefox содержит встроенный редактор, который вы можете использовать, нажав на фигуру многоугольника в Инспекторе.
На данный момент для Chrome есть несколько расширений, которые вы можете использовать, такое как CSS Shapes Editor.
Многоугольники можно использовать для вырезания фигур вокруг изображений или других элементов. В данном примере мы создаём буквицу, нарисовав многоугольник вокруг большой буквы.
Пример текста. .letter
Изображения
Интересной особенностью CSS Shapes является то, что вам не всегда нужно явно определять фигуру с помощью функции. Вы также можете использовать адрес полупрозрачного изображения для определения фигуры и текст будет его автоматически обтекать.
Важно отметить, что используемое изображение должно быть CORS-совместимым, в противном случае вы получите ошибку подобную приведённой ниже.
Access to image at ‘file:///users/tania/star.png’ from origin ‘null’ has been blocked by CORS policy: The response is invalid.
Добавление изображения с того же сервера гарантирует, что вы не получите подобную ошибку.
В отличие от других примеров, мы будем использовать тег вместо . На этот раз CSS простой — просто поместите url() в свойство shape-outside , как вы бы это сделали со свойством background-image .
Пример текста. .star < float: left; height: 350px; width: 350px; shape-outside: url('./star.png') >
Поскольку изображение, которое я использовала, было звездой с прозрачным фоном, текст понял, какие области прозрачные, а какие нет, и выравнялся соответствующим образом.
Градиенты
Наконец, в качестве фигуры можно использовать градиенты. Они работают как изображения, и как с изображением, которое мы использовали выше, текст будет обтекать прозрачную часть.
С градиентами мы будем использовать одно новое свойство — shape-image-threshold . Оно определяет порог альфа-канала фигуры, другими словами, какой процент изображения будет считаться прозрачным.
Я сделала пример с градиентом, который разделен на 50%/50% между цветом и прозрачностью и установила значение shape-image-image как .5. Это означает, что все пиксели с непрозрачностью более 50% должны рассматриваться как часть изображения.
Пример текста. .gradient
Можно увидеть, как градиент идеально разделён диагональю по центру прозрачного и непрозрачного цвета.
Заключение
В этой статье мы узнали о трёх свойствах CSS Shapes — shape-outside , shape-margin и shape-image-threshold . Мы также узнали, как использовать функции для создания кругов, эллипсов, прямоугольников и сложных многоугольников, вокруг которых может обтекать текст. Продемонстрировали, как фигуры могут отслеживать прозрачные фрагменты изображений и градиентов.
Все примеры из этой статьи можно найти в следующей демонстрации, а также скачать исходные файлы.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные материалы
- Самоучитель HTML4
- Самоучитель CSS
- Как добавить картинку на веб-страницу?
- Спецсимволы
- Структура HTML-кода
- Введение в HTML
- Способы добавления стилей на страницу
- Выравнивание текста
- Якоря
- Позиционирование элементов
- Как добавить иконку сайта в адресную строку браузера?
- Ссылки