The Wide World of CSS Shapes
CSS can be surprisingly expressive, and not everyone is aware of the possibilities that the box-model provides. Despite its name, the box-model allows us to create a variety of geometric shapes. Whether you use this guide to improve your CSS art, or to spruce up the UI of a web app, is up to you.
You can follow along by taking a look at this CodePen:
Tools
Generators
There are a variety of generators that can be used to assist in creating shapes with CSS, here are a few that I think are helpful:
-
: This generates more complex (8 value) border radii. I personally didn’t even know this many radius options existed before this generator. : The clip-path property clips off part of an element, allowing it to show up as a different shape. Clippy writes the clip-path for you, with a visual interface. : As the name implies, this makes generating triangles with CSS (not using clip-path) much easier by providing a visual interface.
You can obviously feel free to write these by hand, but the generators can be a time-saver.
CSS Selectors and Properties
These are concepts to keep in mind, that make creating shapes with CSS easier.
- ::before/::after
- border properties: border-color , border-radius
- box-shadow
- z-index
The basics
These are the simplest shapes, and the ones people are more likely to be comfortable with. All the more complicated shapes build upon these:
**I’m putting my height/width in px here, but they are in % in the CodePen example. Either one is fine, however, keep in mind that the CodePen example uses absolute positioning — if you’re confused by that, stick to exact units like px or rem .**
- Rectangle — created by setting an uneven height , width , and background-color on a block element.
- Square — setting equal height and width .
- Circle — same as a square, with 50% border-radius .
- Ellipse — (or oval) same as a rectangle, with 50% border-radius :
Commonly used shapes
Now that you’re comfortable with your arsenal of basic shapes, you might be wondering how to create shapes that are, well, cooler.
- Triangle (without clip-path) — a triangle shape is achieved by setting the height and width to 0, and manipulating the element border .
- Triangle (with clip-path) — with clip-path , we clip away the sides of a square or rectangle to get a triangle.
- Heart — a heart layers a rotated square and two circles.
- Crescent — a crescent achieves its shape by adding a solid box-shadow to a circle. Another option is to layer two circles.
- Star — made by using clip-path , can also be created by manipulating borders (check out additional resources at the end of this article).
More clip-path shapes
These are all squares, with different clip-path values.
- Trapezoid
- Parallelogram
- Pentagon
- Hexagon
Be sure to take a look at Clippy for even more shapes.
Other Cool Shapes
- Curved line — a curved line, with consistent height through-out (as opposed to creating a line with border-top ), is created by setting all but one border-color of a round element to transparent.
- Leaf — this is a fun one that manipulates border-radius to create a leaf-like shape.
- Blobs — more border-radius fun! Many unique blob shapes can be created by playing around with border-radius .
That’s all for now, but please check out the additional resources below for even more CSS shape possibilities. And if you’re interested, take a look at my CSS art!
Делаем геометрические фигуры на css
CSS способен создавать всевозможные фигуры. Квадраты и прямоугольники легки, поскольку они являются естественными формами сети. Добавьте ширину и высоту, и вы получите нужный вам прямоугольник размера. Добавьте border-radius, и вы можете округлить эту форму, и достаточно, вы можете превратить эти прямоугольники в круги и овалы.
Мы также получаем элементы ::beforeи::after psuedo в CSS, которые дают нам возможность еще двух фигур, которые мы можем добавить к исходному элементу. Умничая с позиционированием, трансформацией и многими другими хитростями, мы можем создавать множество фигур в CSS только с одним HTML-элементом.
How to draw circle in html page?
You can’t draw a circle per se. But you can make something identical to a circle.
You’d have to create a rectangle with rounded corners (via border-radius ) that are one-half the width/height of the circle you want to make.
It is quite possible in HTML 5. Your options are: Embedded SVG and <canvas> tag.
To draw circle in embedded SVG:
Circle in <canvas> :
There are a few unicode circles you could use:
You can overlay text on the circles if you want to:
You could also use a custom font (like this one) if you want to have a higher chance of it looking the same on different systems since not all computers/browsers have the same fonts installed.
border-radius:50% if you want the circle to adjust to whatever dimensions the container gets (e.g. if the text is variable length)
Don’t forget the -moz- and -webkit- prefixes! (prefixing no longer needed)
As of 2015, you can make it and center the text with as few as 15 lines of CSS (Fiddle):
Without any -webkit- s, this works on IE11, Firefox, Chrome and Opera, and it is valid HTML5 (experimental) and CSS3.
Same on MS Edge (2020).
There is not technically a way to draw a circle with HTML (there isn’t a <circle> HTML tag), but a circle can be drawn.
The best way to draw one is to add border-radius: 50% to a tag such as div . Here’s an example:
border-radius: 50%; will turn all elements into a circle, regardless of size. At least, as long as the height and width of the target are the same, otherwise it will turn into an oval.
Alternatively, you can use clip-path: circle(); to turn an element into a circle as well. Even if the element has a greater width than height (or the other way around), it will still become a circle, and not an oval.
You can place text inside of the circle, simply by writing the text inside of the tags of the target,
like so:
If you want to center text in the circle, you can do the following:
You can use the border-radius attribute to give it a border-radius equivalent to the element’s border-radius. For example:
(The reason for using the -moz and -webkit extensions is to support pre-CSS3-final versions of Gecko and Webkit.)
There are more examples on this page. As far as inserting text, you can do it but you have to be mindful of the positioning, as most browsers’ box padding model still uses the outer square.
The followings are my 9 solutions. Feel free to insert text into the divs or svg elements.
Круги в CSS
От автора: я постоянный эксперт Cloud Four по кругам. Я не планировал им быть. Некоторое время назад мы работали над проектом, в котором было много кругов: круглые контейнеры, круглые миниатюры, круглые кнопки. И сначала я стал парнем, с которым можно поговорить, если у вас возникли проблемы с кругами и CSS.
Но я открою вам секрет: в этом нет ничего сложного. К концу этой статьи я думаю, что вы тоже будете экспертом.
Создание кругов
Существует несколько методов определения динамических круглых форм в HTML и CSS, каждый из которых имеет свои плюсы и минусы. Вот те немногие, с которыми я экспериментировал больше всего, от самых распространенных и до наименее распространенных.
border-radius
Самая распространенная техника — это скруглить все углы на 50%. Это самый простой способ, и он широко поддерживается. Свойство border-radius также будет влиять на обводки, тени и целевой размер касания / клика элемента.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Если вы хотите, чтобы круг растягивался до формы таблетки, установите для border-radius половину высоты элемента вместо 50%. Если высота неизвестна, выберите произвольно большое значение (например, 99em).
SVG может включать в себя элемент <circle/>, который может быть стилизован аналогично любому другому контуру. Они очень хорошо поддерживаются и производительны для анимации, но требуют больше разметки, чем другие методы. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус круга (плюс половина ширины его обводки, если есть) немного меньше viewBox SVG.
clip-path
Это новая техника. Ее поддержка вполне достойная, но менее последовательная. clip-path не влияет на макет элемента, что означает, что оно влияет на обводку и, скорее всего, будет скрывать внешние тени. Это может быть хорошо или плохо в зависимости от того, чего вы пытаетесь достичь.
Радиальный градиент
Мы можем использовать background-image и radial-gradient, чтобы визуально заполнить элемент кругом. Любой контент будет располагаться поверх этой фигуры, но его расположение (включая целевой размер касания / клика) не будет затронуто. Это мой наименее любимый метод, потому что края круга могут казаться неровными или нечеткими в зависимости от браузера, но это может хорошо подходить для тонких фоновых деталей.
Центрирование контента
Можно использовать практически любой метод для центрирования вещей с помощью CSS. Но иногда вы можете заметить, что содержимое выглядит слегка смещенным. Хотя это не уникально для круглых контейнеров, их уменьшенная площадь поверхности делает проблему еще более заметной.
Сравнение методов центрирования для элементов разных размеров в Safari. Обратите внимание, что некоторые методы имеют более заметный джиттер в положении значка относительно его контейнера.
Это связано с тем, как браузеры рассчитывают субпиксели. Каждый раз, когда мы используем относительные единицы, единицы на основе окра просмотра или значения из модульной шкалы, есть вероятность, что мы просим браузер вычислять дробные значения, например 22.78125px. Когда-нибудь эта проблема может сломать нашу сетку или вызвать другие фундаментальные проблемы. В наши дни браузеры тщательно работают над изменением вычислений в зависимости от элемента, свойства и контекста, но это все равно не идеально.
По моему опыту, самый гибкий метод для центрирования — использовать комбинацию абсолютного позиционирования (чтобы установить центральную точку на основе расположения родительского элемента) и преобразования (чтобы поместить дочерний элемент с помощью относительных вычислений):
Обрезка содержимого
Центрирование это хорошо, но что, если мы хотим заполнить круг изображением?
С помощью HTML / CSS
Мы можем обрезать элемент img до круга, используя border-radius:
Это имеет некоторые ограничения:
Элемент не адаптируется к своему контейнеру.
Мы не можем применить какие-либо внутренние тени, чтобы как-то отделить изображение от фона (кроме как в самом изображении).
Мы используем object-fit: cover для предотвращения искажения неквадратных изображений, но это не поддерживается в IE11.
Вот более сложный пример. В нем используется элемент-оболочка, чтобы установить соотношения сторон блока для поддержания квадратных пропорций, в нем улучшается обработка неквадратных изображений с помощью @supports и применяется прозрачная внутренняя тень, чтобы отделить изображение от фона:
С помощью SVG
Мы можем сделать то же самое, используя SVG:
Но поскольку элементы SVG image не поддерживают srcset или sizes, это, вероятно, плохой выбор для шаблона эскизов изображений общего назначения.
Субпиксельные промежутки
Если вы наложите внутренние тени, границы или другие причудливые элементы поверх круглого содержимого, вы можете в конечном итоге заметить, что появляются некоторые субпиксельные артефакты:
Светлые пиксели вдоль края, где фон выходит за внутреннюю границу.
К сожалению, я не нашел решения этой проблемы. Кажется, это происходит независимо от техники, используемой для рисования границы или отображения изображения, и это имеет место в некоторой степени в каждом браузере.
Если вы найдете способ наложения круговых эффектов без этих артефактов, пожалуйста, дайте мне знать в комментариях!
Обтекание текстом
Текст! Это основа Интернета. Он заполняет прямоугольники и разбивается на строки. Что мы можем сделать с этим?
Внешний текст
Вы можете задать обтекание текстом вокруг круглой фигуры, используя свойство shape-outside:
Внутренний текст
Стоп! Это, наверное, плохая идея! Сделать его адаптивным практически невозможно! Просто подождите, пока у нас не будет свойства shape-inside!
Точно? Хорошо, хорошо, у Джонатана Скита есть интеллектуальный хак. Он использует псевдо-элементы для установки shape-outside по обе стороны от текста:
Вдоль контура
Мы можем установить текст по изогнутому контуру с помощью SVG и <textPath>:
К сожалению, <circle> поддерживается для <textPath> не во всех браузерах, но преобразование в <path> не слишком сложное.
Заключение!
Вот и все! Вы прочитали длинную статью о действительно важной теме, прошли по ее минным полям с вложенными заголовками и повторяющимися демонстрациями и обрели знание о кругах в качестве единственной награды! Продолжайте в том же духе, отважный читатель! Я верю в вас!
Автор: Tyler Sticka
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…