Как нарисовать полукруг на CSS
Полукруг получается если у прямоугольника, у которого одна сторона в два раза больше другой, закруглить углы [см. генератор]. С помощью padding в процентах можно добиться пропорционального изменения высоты и ширины «резинового» блока.
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
clip-path : отсечь лишний фрагмент HTML-элемента
Свойство clip-path вырезает из элемента часть:
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
С помощью shape-inside
Свойство shape-inside позволяет вписать текст в окружность, даже без самой окружности, но пока не поддерживается браузерами.
текст текст текст текст текст текст текст текст текст текст
текст
- Круг на CSS
- Треугольник на CSS
Как создать круглое изображение средствами CSS
В CSS есть проблема с отображением круглого изображения, так как изображения имеют прямоугольную или квадратную форму.
Вы всегда можете использовать графический редактор, например, Gimp или Photoshop чтобы обрезать изображение в виде круга или даже использовать онлайн-инструменты, такие как MockoFun, чтобы обрезать изображение онлайн. Но эта заметка о том, как сделать круглые изображения с помощью CSS.
Итак, как сделать круговое изображение только с помощью CSS?
В этой заметке ее автор расскажет вам, как использовать CSS для преобразования прямоугольного или квадратного изображения в круглое.
Округленное изображение с использованием CSS свойством border-radius
Самое простое решение для отображения изображения в виде круга с помощью CSS — это использование border-radius . Это свойство используется для создания закругленных границ для элементов HTML, поэтому оно также работает и для изображений.
Чтобы этот метод работал с изображениями любых размеров (в горизонтальной, вертикальной или горизонтальной ориентации), необходимо, чтобы изображение имело родительский HTML-элемент («обертку»). Мы будем использовать элемент span в качестве оболочки с именем CSS-класса circle-image .
И CSS для создания круглого изображения:
.circle-image < display: inline-block; border-radius: 50%; overflow: hidden; width: 50px; height: 50px; >.circle-image img
Вот и весь код CSS, который вам нужен для отображения круглого изображения!
Автор использовал display: inline-block , потому что элемент span по-умолчанию строчный, и ему нужно менять значение display , чтобы можно было установить размеры.
Установка значения border-radius равным 50% на самом деле и создает закругленное изображение с помощью CSS, поскольку оно округляет углы с радиусом 50% (половиной) от всего размера изображения.
Для img автор просто использовал 100% для размера, чтобы убедиться, что он плотно прилегает к элементу «обертки». Свойство object-fit: cover обеспечивает сохранение соотношения изображения, чтобы оно не растягивалось.
Этот подход довольно прост, но он не лишен неудобств. Например, вы должны указывать размер изображения. В примере автор поставил значение, равное 50px , а вам нужно будет указывать ваш размер.
Округленное изображение с использованием CSS свойством background-image
По сути, мы используем CSS, чтобы установить наше изображение в качестве фона HTML-элемента и сделать элемент округлым. Таким образом мы получим желаемый результат.
и CSS-код, закругляющий наше изображение:
.circle-image
Если вам нужно расположить изображение внутри круга нестандартно, вы можете использовать CSS-свойство background-position , чтобы указать левую и верхнюю позиции или комбинации значений: bottom | top | center | left | right .
В большинстве случаев описанных решений будет достаточно, но что, если вам нужно сделать адаптивное изображение круга с помощью CSS?
Адаптивное закругленное изображение с использованием CSS
Нравится нам это или нет, но адаптивный веб-дизайн является важным требованием для веб-сайтов. Давайте посмотрим, что нам нужно изменить в нашем CSS-коде кругового изображения выше, чтобы сделать его адаптивным.
HTML-код остается прежним, потому что нам все еще нужен элемент-обертка:
и адаптивный CSS-код, закругляющий наше изображение:
.circle-image < display: inline-block; overflow: hidden; width: 33%; padding-bottom: 33%; height: 0; position: relative; >.circle-image img
Итак, что мы изменили?
Ну, во-первых, мы установили ширину ( width ) элемента span («обертки») в процентах. Это делает изображение круга адаптивным. Автор использовал значение, равное 33%, поэтому он будет масштабирован до 1/3 контейнера изображения.
Мы знаем, что для размещения адаптивных изображений, нужно использовать намного больше CSS, таких как, например, медиа-запросы, но это выходит за рамки этой статьи.
Есть один хитрый трюк, чтобы превратить фигуру в квадрат: установка height равной 0 и padding-bottom , равного ширине ( width ) элемента. Это нужно нам для того, чтобы убедиться, что изображение становится кругом, а не сжатым овалом.
Этот трюк автор статьи придумал не сам, а нашел здесь .
И последнее, что мы установили для элемента «обертки» - правило position: relative . Это связано с тем, что изображение внутри будет иметь position: absolute , и мы хотим, чтобы изображение было позиционировано как абсолютное, относительно элемента обтекания, а не всего документа. Наконец, мы снова установим border-radius равный 50%, но на этот раз для изображения. Это сделает изображение закругленным.
Закругленное изображение с использованием CSS свойством clip-path
Теперь давайте рассмотрим другой способ использования CSS для закругления изображений.
CSS-свойство clip-path создает область отсечения, которая определяет, какая часть элемента должна отображаться. Части, которые находятся внутри области, показаны, а те, которые снаружи, скрыты. Одним из значений этого свойства CSS является circle .
clip-path: circle( [ ]? [ at ]? )Таким образом, с помощью этого свойства CSS вы можете обрезать элемент изображения в форме круга с указанным центром и радиусом.
HTML-код остается прежним:
А в CSS-коде адаптивного кругового изображения мы заменяем свойство border-radius на clip-path :
.circle-image < display: inline-block; overflow: hidden; width: 33%; padding-bottom: 33%; height: 0; position: relative; >.circle-image img
При добавлении свойства clip-path изображение обрезается в виде круга с радиусом, равным половине элемента «обертки».
Заключение
Мы рассмотрели несколько вариантов создания кругового изображения с помощью CSS. Теперь вы знаете все их «за» и «против». Если у вас есть какие-либо вопросы или замечания, пожалуйста, напишите автору комментарий в конце статьи и он постарается помочь.
Если вам понравился этот пост и вы хотите изучить HTML и CSS, автор рекомендует вам в следующий раз прочитать пост « Создание красивых HTML-диаграмм ».
Оригинал статьи: CSS Circle Image: “How To” Complete Guide
Автор статьи: John Negoita
Перевод: Земсков Матвей
Способы создания кругов с помощью CSS стилей
Довольно часто при верстке веб-проекта есть потребность в создании круглых элементов: круглые кнопки, круглые миниатюры, круглые иконки, или даже целые круглые контейнеры. В некоторых случаях выйти из ситуации можно с помощью простых картинок, а иногда такой подход не помогает. Как же решить проблему, и только с помощью CSS стилей? В сегодняшнем уроке мы рассмотрим 5 основных способов, с помощью которых вы сможете создавать на своих сайтах любые круглые элементы.
Круги в CSS
Существует несколько методов создания круглых форм в HTML с помощью CSS стилей, каждый из которых имеет как свои плюсы, так и минусы. Давайте же рассмотрим самые популярные решения, которые позволят вам сделать круги в CSS.
Решение №1: радиус границы (border-radius)
Самая распространенная техника для создания кругов – это скругление всех углов на 50%. Это самый простой способ, и он отлично поддерживается браузерами. Свойство border-radius также можно применять к границам и теням. Практический пример:
.circle-blockЕсли вы хотите получить не круг, а прямоугольник со скругленными краями, тогда установите для свойства border-radius значение менее 50%.
Решение №2: использование SVG
SVG может включать элемент
, которому можно добавить стили, аналогично любому другому пути ( path ) масштабируемой векторной графики. Этот элемент имеет хорошую поддержку браузерами и эффективен для создания анимации, но для него нужно добавлять чуть больше разметки, чем для других методов. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус окружности (атрибут r ), меньше, чем значение viewBox в SVG. Практический пример: .circle-blockРешение №3: свойство Путь обрезки (Clip Path)
Свойство Путь обрезки ( clip-path ) появилось в CSS совсем недавно. Поддержка браузерами приличная, но не повсеместная. Свойство clip-path не влияет на макет элемента, что означает, что оно не будет влиять на границы, но будет скрывать внешние тени. Это может быть и хорошим решением, или плохим, в зависимости от того, какую цель вы преследуете. Практический пример:
.circle-blockРешение №4: использование радиального градиента
Вы можете использовать фоновое изображение и радиальный градиент, чтобы визуально заполнить элемент кругом. Это не очень эффективный метод, поскольку края круга могут казаться неровными или размытыми в зависимости от браузера. Практический пример:
.circle-blockРешение №5: обрезка контента с помощью круга в CSS
Вы можете обрезать элемент
по размерам круга, используя свойство border-radius . Практический пример:
.circle-block img
- Элемент не отзывчивый (responsive) относительно своего контейнера
- Нельзя применить внутренние тени в элементу (хотя можно попробовать использование псевдоэлементов :after или :before)
- Свойство подгонки объекта object-fit: cover , которое предотвращает искажение неквадратных изображений, не поддерживается в IE11
Ниже вы можете увидеть демо всех рассмотренных сегодня практических решений как сделать круги в CSS.
Вот и все на сегодня! Из сегодняшней практической статьи вы узнали, как с помощью разных способов можно сделать круги в CSS. Спасибо, что читаете нас!
Как сделать дугу на CSS или SVG
Так как в ответе достаточно мало информации о задании, то могу предложить такой некрасивый, костыльный, но работающий вариант. Как реализовать получше я еще подумаю.
Отслеживать
ответ дан 13 авг 2017 в 9:09
3,189 2 2 золотых знака 23 23 серебряных знака 45 45 бронзовых знаков
Попробуйте создать элемент и написать в CSS
.cont< display:block; width: 100px; height:100px; border-radius:50%; border-top:1px solid #000;Отслеживать
ответ дан 13 авг 2017 в 9:08
321 2 2 серебряных знака 10 10 бронзовых знаков
Мой вариант решения, делала дуги разного градуса https://codepen.io/ksenia-ok/pen/xyyNmz
#rotate_360, #rotate_270, #rotate_180, #rotate_90 < position: relative; width: 212px; height: 100px; >.flex_block < display: flex; >#rotate_90:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-left: 20px solid white; border-right: 20px solid red; border-top: 20px solid white; border-bottom: 20px solid white; -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#rotate_180:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-left: 20px solid white; border-right: 20px solid red; border-top: 20px solid white; border-bottom: 20px solid red; -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#rotate_270:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border-left: 20px solid red; border-right: 20px solid red; border-top: 20px solid white; border-bottom: 20px solid red; -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#rotate_360:after
Отслеживать
ответ дан 24 окт 2018 в 21:35
Ксюша Щанникова Ксюша Щанникова
41 1 1 бронзовый знак
Вдохновившись качеством ответа от @not_a_true_programmer - решил опробовать его метод в песочнице и вот что получилось:
main < width: auto; padding: 10px; background: #222; border: 4px solid #929292; border-radius: 150px; display: inline-block; >div < display: flex; >.cr < visibility: hidden; display: inline-block; width: 50px; height: 50px; border: 2px solid #fff; >.center < display: inline-block; width: 100px; height: 100px; border: 4px solid #929292; border-radius: 50%; background: radial-gradient(#becccc, #929292, #becccc); >.vrh, /*верх*/ .niz, /*низ*/ .lev, /*лево*/ .prv .vrh < /*верх*/ width: 100px; height: 50px; border-bottom: none; border-radius: 100px 100px 0 0; background: radial-gradient(#becccc, #929292, #becccc); >.niz < /*низ*/ width: 100px; height: 50px; border-top: none; border-radius: 0 0 100px 100px; background: radial-gradient(#becccc, #929292, #becccc); >.lev < /*лево*/ width: 50px; height: 100px; border-right: none; border-radius: 100px 0 0 100px; background: radial-gradient(#becccc, #929292, #becccc); >.prv body
Любую дугу можно "зеркалить" сверху/вниз и слева/направо. Достаточно лишь аргументы в соответствующих рисунку border-radius: поменять местами, да в нужном месте border-radius: none; сделать.
Оригинал лежит в "песочнице".