Как сделать фигуры в css
Перейти к содержимому

Как сделать фигуры в css

  • автор:

Создаем простые геометрические фигуры на чистом 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-ил­лю­стра­ци­ям

Если бы вы меня спросили, какой вопрос мне чаще всего задают про фронтенд-разработку, я бы ответил: «Как прокачаться в CSS?». Этот вопрос обычно озвучивают после того, как я делюсь сделанными мной CSS-иллюстрациями. Это то, что я люблю делать на CodePen.

Для многих CSS — неукротимый мифический зверь. Этот твит Криса заставил меня улыбнуться, потому что, несмотря на всю иронию, в нём много правды. Тем не менее, что, если я скажу вам, что вам нужно всего несколько свойств и техник, чтобы создать всё, что вы хотели? Правда в том, что это действительно так.

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

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

Время и практика Скопировать ссылку

CSS-иллюстрация требует много времени и практики. Чем точнее вы хотите быть и чем сложнее иллюстрация, тем больше времени это займёт. Самая затратная часть — не решение, какие свойства использовать и как, а отшлифовка результата до состояния, чтобы всё выглядело правильно. Будьте готовы изучить инспектор стилей в вашем браузере! Я также рекомендую попробовать VisBug, если вы этого ещё не сделали.

Два фантастических CSS-художника — Бен Эванс и Диана Смит. Оба недавно рассказывали о затратах времени на CSS-иллюстрации.

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

Я запостил мем про чашку, и в ответе Бена всё было прекрасно:

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

Это требует времени!

Фотореалистичное изображение белой чашки на белом столе.

Трассировка вполне приемлема Скопировать ссылку

Зачастую мы уже имеем представление о том, что хотим нарисовать. В конце концов, эта статья не о дизайне. Речь идет о том, чтобы взять изображение и отрендерить его с помощью DOM и CSS. Я уверен, что эта техника существует с незапамятных времен. Но это то, чем я делюсь последние несколько месяцев.

  • Найдите или создайте изображение, которое вы хотите нарисовать.
  • Вставьте его в ваш HTML при помощи .
  • Расположите его так, чтобы оно находилось прямо под вашей иллюстрацией.
  • Уменьшите прозрачность изображения, чтобы его было видно, но не слишком.
  • Трассируйте его с помощью DOM.

К моему удивлению, про эту технику не все знают. Но она бесценна для создания точных CSS-иллюстраций.

Следите за трюком в действии:

Вот таймлапс создания логотипа @eggheadio на CSS �� Поигрался с тенями и применил clip-path поверх ��️ @jh3yy

И попробуйте его здесь:

Обращайте внимание на отзывчивость Скопировать ссылку

Если вы начнёте использовать только две техники из этой статьи, пусть это будут трассировка из раздела выше и эта.

Есть немало фантастических примеров CSS-иллюстраций. Но одна из неприятных особенностей некоторых из них в том, что они не стилизованы — или даже не видны — на маленьких экранах. Мы живём в эпоху, когда очень важны первые впечатления от технологий. Рассмотрим на примере клавиатуры, нарисованной на CSS. Кто-то находит вашу работу, открывает её на своём смартфоне, а его встречает только половина иллюстрации или её небольшая часть. Они скорее всего упустили самые крутые части демо!

Вот мой приём: использовать единицы вьюпорта для иллюстраций и создавать свою собственную масштабированную единицу измерения.

Для размеров и позиционирования вы можете использовать либо масштабированную единицу измерения, либо проценты. Это особенно полезно, когда вам нужно использовать box-shadow , потому что это свойство работает с единицами вьюпорта, но не работает с процентами.

Рассмотрим CSS-логотип egghead.io, который я создал ранее. Я нашел изображение, которое хотел использовать, и добавил его в DOM тегом .

Высота 50vmin — желаемый размер CSS-иллюстрации. Уменьшение прозрачности позволяет нам «трассировать» иллюстрацию по мере прогресса.

Теперь создадим нашу масштабированную единицу измерения.

/** * размеры изображения 742 x 769 * ширина — 742 * высота — 769 * желаемый размер — 50vmin */ :root < --size: 50; --unit: calc((var(--size) / 769) * 1vmin); >

Зная размеры изображения, мы можем создать единицу измерения, которая будет масштабироваться вместе с нашим изображением. Мы знаем, что высота — это самая большая сторона, поэтому используем её как основу для создания дробной единицы.

Получим что-то вроде такого:

--unit: 0.06501950585vmin; 

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

Если мы используем проценты или наше новое кастомное свойство -⁠-⁠unit для стилизации элементов внутри контейнера нашей CSS-иллюстрации, мы получим отзывчивую CSS-иллюстрацию… И всё это требует всего несколько строчек математики с использованием CSS-переменных!

Поизменяйте размеры этого демо, чтобы увидеть, что все пропорции сохраняются, ограничиваясь по размеру до 50vmin .

Семь раз отмерь, один отрежь Скопировать ссылку

Следующий совет: замеряйте. Чёрт, вы даже можете взять рулетку, если работаете с физическим объектом!

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

:root < --light-switch: 15; --light-switch-border: 10; --light-switch-top: 15; --light-switch-bottom: 25; --tv-bezel: 15; --tv-unit-bezel: 4; --desired-height: 25vmin; --one-cm: calc(var(--desired-height) / var(--tv-height)); --tv-width: 158.1; --tv-height: 89.4; --unit-height: 42; --unit-width: 180; --unit-top: 78.7; --tv-bottom: 114.3; --scaled-tv-width: calc(var(--tv-width) * var(--one-cm)); --scaled-tv-height: calc(var(--tv-height) * var(--one-cm)); --scaled-unit-width: calc(var(--unit-width) * var(--one-cm)); --scaled-unit-height: calc(var(--unit-height) * var(--one-cm)); >

Как только мы вычислили переменную, можем использовать её везде. Я знаю, что мой телевизор 158,1 см в ширину и 89,4 см в высоту — подсмотрел в инструкции. Но в моей CSS-иллюстрации он всегда будет ограничен 25vmin .

Используйте абсолютное позиционирование для всего Скопировать ссылку

Этот совет позволит сэкономить на нажатиях клавиш. Чаще всего вы будете пытаться позиционировать элементы абсолютно. Помогите себе и положите это правило куда-нибудь.

/* Имена классов могут отличаться */ .css-illustration *, .css-illustration *:after, .css-illustration *:before, .css-illustration:after, .css-illustration:before

Ваша клавиатура скажет вам спасибо!

Или поиграйте в этой песочнице:

Придерживайтесь подхода Скопировать ссылку

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

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

Я склонен соотнести свой подход с тем, как если бы вы создавали векторное изображение, в котором иллюстрация состоит из слоёв. Разделите её и нарисуйте на бумаге, если нужно. Но начните снизу и прорабатывайте свой путь наверх. Это обычно означает более крупные фигуры сначала, а более мелкие детали — позже. Вы всегда можете повозиться с контекстом наложения, когда вам нужно подвигать элементы.

Сохраняйте жёсткую структуру ваших стилей Скопировать ссылку

Это приводит нас к структуре. Старайтесь избегать плоской DOM-структуры для вашей иллюстрации. Сохранение вещей атомарными позволяет проще двигать части вашей иллюстрации. А ещё так гораздо проще показывать или прятать части иллюстрации или даже потом анимировать их. Рассмотрим демо CSS Snorlax. Руки, ноги, голова и прочие части являются отдельными элементами. Это сделало анимирование руки гораздо проще, чем если бы я пытался держать всё вместе, так как я смог просто применить анимацию к классу .snorlax__arm-left .

Вот ускоренная запись того, как я делал это демо:

Попытался собрать таймлапс создания CSS Snorlax, которого мы делали вчера ночью. Забавно пересматривать! @jh3yy

Работа с неудобными фигурами Скопировать ссылку

Есть довольно неплохая статья на CSS-Tricks про создание фигур с помощью CSS. Но как насчёт более «неуклюжих» фигур, таких как длинная кривая или даже обводка? В таких случаях нужно мыслить нестандартно. Такие свойства, как overflow , border-radius и clip-path — отличные помощники.

Посмотрим на демо CSS Jigglypuff. Нажмите на чекбокс.

Вот ключ к созданию искривлённых фигур! У нас есть элемент, который гораздо больше тела с примененным border-radius . Тогда мы задаем overflow: hidden телу, чтобы обрезать этот лишний кусок.

Как мы можем сделать обводку? Это уже немного сложнее. Но мне нравится следующий приём: используйте прозрачный элемент с толстой рамкой. Затем примените border-radius и обрежьте лишнее, если нужно.

Если вы нажмёте на чекбокс, покажется элемент, который мы используем для обводки этого угла. Другой приём может заключаться в том, чтобы наложить поверх круг, совпадающий по цвету с фоном. Это нормально, пока нам не понадобится изменить цвет фона. Хорошо, если у вас есть переменная или что-то вроде для этого цвета. Но такой подход слегка сложнее поддерживать.

clip-path — ваш друг Скопировать ссылку

В последнем демо вы могли заметить парочку интересных CSS-свойств, например, clip-path . Вам почти наверняка понадобится clip-path , если вы хотите создавать сложные CSS-фигуры. Его особенно удобно использовать для обрезания краёв элементов, когда применение overflow на родителе не помогает.

Вот небольшое демо, которое я собрал некоторое время назад, чтобы показать различные возможности clip-path .

Есть ещё такое демо, которое берёт идеи из статьи Shapes of CSS и воссоздаёт фигуры при помощи clip-path .

border-radius — ещё один друг Скопировать ссылку

Вам точно понадобится border-radius для создания кривых. Один необычный приём заключается в использовании синтаксиса с двумя значениями. Это позволяет задавать горизонтальный и вертикальный радиус для каждого угла.

Поиграйте с этим демо, чтобы по-настоящему оценить мощь border-radius . Я призываю использовать проценты для значений, чтобы сохранять отзывчивость элементов.

Техники создания теней Скопировать ссылку

У вас уже есть все формы, всё хорошо продумано, правильные цвета везде, где нужно… Но что-то всё ещё выглядит не так. Скорее всего, это отсутствие теней.

Тени добавляют глубину и создают реалистичные ощущения. Посмотрим на это воссоздание иллюстрации Галь Шир. Галь великолепно использует тени и градиенты для создания красивой иллюстрации. Я подумал, что было бы интересно воссоздать её и добавить переключатель, который включает и выключает затенение, чтобы оценить разницу, которое оно создаёт.

Эффекты затенения часто создаются при помощи комбинации box-shadow и background-image .

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

.cauldron

Обратите внимание, что здесь используются radial-gradient() и linear-gradient() , и они не всегда содержат идеально круглые числовые значения. Опять же, такие числа нормальны. На самом деле вы потратите много времени, настраивая и подкручивая разные значения в инспекторе стилей.

То же самое применимо и к box-shadow . Однако с ним мы также можем использовать значение inset , чтобы создавать хитрые границы и дополнительную глубину.

.cauldron__opening

Конечно, бывают случаи, когда куда разумнее использовать filter: drop-shadow() , чтобы получить желаемый эффект.

Сайт Линн Фишер a.singlediv.com — яркий пример этих свойств в действии. Потыкайте в разные элементы на этом сайте и исследуйте некоторые из иллюстраций, чтобы найти отличные способы применения box-shadow и background-image в иллюстрациях.

Свойство box-shadow настолько мощное, что вы можете создать целую иллюстрацию только с ним. Я однажды пошутил о создании CSS-иллюстрации доллара.

Я использовал генератор, чтобы создать иллюстрацию всего из одного . Но Альваро Монторо пошёл дальше и написал генератор, который вместо этого использует box-shadow .

Препроцессоры очень полезны Скопировать ссылку

Хоть это и не необходимо, использование препроцессоров может помочь содержать ваш код в чистоте и порядке. Например, Pug позволяет писать HTML быстрее, особенно когда нужно использовать циклы для работы с группой повторяющихся элементов. А дальше мы можем ограничить кастомные CSS-свойства таким образом, чтобы нужно было определить стили всего один раз, а затем переопределять их при необходимости.

Вот другой пример, который демонстрирует структуру по принципу DRY. Цветы свёрстаны с одинаковой разметкой, но каждый имеет свой собственный класс с индексом, который используется для переопределения CSS-свойств.

У первого цветка такие свойства:

.flower--1

Это первый, все остальные основаны на нём. Обратите внимание, что второй цветок немного смещён вправо и вверх. Всё, что нужно, это дать разные значения тем же кастомным свойствам:

.flower--2

Анимированный отзывчивый CSS Leif попал в последний CodePen Spark! ✨ Для тех, кто не знаком с Animal Crossing, Leif — ленивец с зелеными пальцами, который посещает ваш остров �� Вот таймлапс! �� @jh3yy

Вот и всё! Скопировать ссылку

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

Способы создания деформированных фигур на css

введите сюда описание изображения

Всем привет! Есть задача замутить что то вроде такой фигуры: Не однократно натыкался на такие но все никак не доходили руки разобраться как их делать. Случайно нашел вот такой сайт https://bennettfeely.com/clippy/ где можно генерировать clip-path, но в таком случае нельзя коректно скруглить углы, потому что clip-path просто «обрезает» блок давая ему искривленный вид, а не деформирует сам блок. В итоге у меня вышло что то типо этого

.col-lg-2 < padding: 20px; >#test-circle6

Может знаете какие либо способы, или сторонние сайты/ресурсы для генерации подобных фигур? Ну или обьясните как правильно их делать? Спасибо за ранее!

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

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

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

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

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

image1

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

image2

Для того чтобы создавать любые фигуры, потребуются свойства, которые появились только в CSS3: transform и border-radius. Кроме них используются обычные параметры width, height, background (для определения цвета фигуры), а также border-radius для округлых линий (окружности, овалы, скругленные углы и пр.).

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

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

HTML код

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

Например, ID круга можно назвать Circle. Тогда, чтобы вставить круг в код, понадобится такой код:

Окружность

image3

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

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

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