Разное

Полукруг css: Полукруг | CSS примеры

01.08.2023

Содержание

Как сделать круги с помощью CSS3

50 264 любопытных

Рекомендую этот хостинг в Украине. Всё очень доступно, цены низкие, и лояльная тех поддержка.

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

В общем давайте, непосредственно, перейдём к практике, но для начала давайте рассмотрим некоторые важные моменты.

Важные моменты

Во всех случаях мы будем использовать следующее:

-webkit-border-radius — для правильного отображения в браузерах таких как Chrome и Safari.

-moz-border-radius — для правильного отображения кругов в браузере Firefox.

Хотелось бы сказать, что на данный момент почти все, с последним обновлением, браузеры поддерживают технологию CSS3, а также свойство border-radius (стандартное свойство для всех браузеров, которые поддерживают CSS3). Но лучше будем, так сказать, страховаться, потому что не все пользователи обновляются вовремя, или же вообще не обновляются и пользуются старыми версиями браузеров.

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

Ну а теперь практика.

Круг с текстом внутри

Привет

CSS

.circle{
 width:100px;
 height:100px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px;
 font-size:20px; color:#fff;
 line-height:100px;
 text-align:center;
 background:#000

}

HTML

Чтобы вставить круг в то место где Вы хотите, нужно просто добавить следующее:

<div>привет</div>

И круг отобразится.

Ух как всё просто 🙂

Привет

CSS

.button{
 width:100px;
 height:100px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px; font-size:20px;
 color:#fff;
 line-height:100px;
 text-align:center;
 background:#000
 }

HTML

Чтобы получился такой круг с ссылкой нужно к коду ссылки присвоить класс:

<a href="#"  class="button">Привет</a>

Это свойство позволяет нам менять цвет при наведении.
Привет

CSS

.menu{
 width:100px;
 height:100px;
 display:block;
 border-radius:50px;
 -moz-border-radius:50px;
 -webkit-border-radius:50px;
 -khtml-border-radius:50px;
 font-size:20px;
 color:#fff;
 line-height:100px;
 text-decoration:none;
 text-align:center;
 background:#000
 }
 .menu:hover{
 color:#fff;
 text-decoration:none;
 background:#333
 }

HTML

<a href="#">Привет</a>

Ну а здесь Вы сможете добавить разные стили на Ваше усмотрение, например тень или бордюр. Вот, что у меня получилось:
Привет

CSS

 
.stylish{
 width:100px;
 height:100px;
 display:block;
 border-radius:66px;
 -moz-border-radius:66px;
 -webkit-border-radius:66px;
 -khtml-border-radius:66px;
 border:#ccc 4px double;
 font-size:20px;
 color:#888;
 line-height:100px;
 text-shadow:0 1px 0 #fff;
 text-decoration:none;
 text-align:center;
 background:#ddd}

.stylish:hover{
 border:#bbb 4px double;
 color:#aaa;
 text-decoration:none;
 background:#e6e6e6
 }

HTML

<a href="#">Hello</a>

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

Обычный круг

.krug {
 width: 100px;
 height: 100px;
 background: #70B4CF;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 }

Овал

. oval {
 width: 180px;
 height: 90px;
 background: #70B4CF;
 -moz-border-radius: 90px/45px;
 -webkit-border-radius: 90px/45px;
 border-radius: 90/45px;
 }

Полукруг

.half-circle{
 background: orange;
 height: 50px;
 width: 100px;
 -moz-border-radius: 100px 100px 0 0;
 -webkit-border-radius: 100px 100px 0 0;
 border-radius: 100px 100px 0 0;
 }

Обрезанный круг

.quartercircle{
 background: #E4A7E8;
 height: 100px;
 width: 100px;
 -moz-border-radius: 100px 0 0 0;
 -webkit-border-radius: 100px 0 0 0;
 border-radius: 100px 0 0 0;
 }

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

простой фон, CSS, HD обои

простой фон, CSS, HD обои

Выберите разрешение и загрузите эти обои

PC(720P, 1080P, 2K, 4K,8K):

  • 1366×768
  • 1920×1080
  • 1440×900
  • 1600×900
  • 1280×800
  • 1024×768
  • 1280×1024
  • 1536×864
  • 1680×1050
  • 1280×720
  • 1360×768
  • 360×640
  • 2560×1440
  • 2560×1080
  • 1920×1200
  • 1280×768
  • 1024×600
  • 800×600
  • 1364×768
  • 320×570
  • 3840×2160
  • 7680×4320

iMac:

iMac 21.
5″ LED-backlit 1080P:

1920×1080

iMac 21.5″ Retina 4K:

4096×2304

iMac 27″ Retina 5K:

5120×2880

MacBook:

MacBook Air 11.6″:

1366×768

MacBook Air 13″, MacBook Pro 15.4″:

1440×900

MacBook Pro 13.3″:

1280×800

MacBook Pro 15.4″ Retina:

2880×1800

MacBook Pro 16″:

3072×1920

MacBook Pro 17″:

1920×1200

MacBook Pro 13.3″ Retina, MacBook Air 13″ Retina, MacBook Air 13.3″(2020, M1):

2560×1600

Двойной монитор:

  • 2732×768
  • 3840×1080
  • 2880×900
  • 3200×900
  • 2560×800
  • 2048×768

Тройной монитор:

  • 4098×768
  • 5760×1080
  • 4320×900
  • 4800×900
  • 3840×800
  • 3072×768

Четырехместный монитор:

  • 2732×1536
  • 3840×2160
  • 2880×1800
  • 3200×1800
  • 2560×1600
  • 2048×1536

iPhone:

iPhone 2G, iPhone 3G, iPhone 3GS:

320×480

iPhone 4, iPhone 4s:

640×960

iPhone 5, iPhone 5s, iPhone 5c, iPhone SE:

640×1136

iPhone 6, iPhone 6s, iPhone 7, iPhone 8:

750×1334

iPhone 6 plus, iPhone 6s plus, iPhone 7 plus, iPhone 8 plus:

1242×2208

iPhone X, iPhone Xs, iPhone 11 Pro:

1125×2436

iPhone Xs Max, iPhone 11 Pro Max:

1242×2688

iPhone Xr, iPhone 11:

828×1792

iPhone 12 mini, iPhone 13 mini:

1080×2340

iPhone 12, iPhone 12 Pro, iPhone 13, iPhone 13 Pro, iPhone 14:

1170×2532

iPhone 12 Pro Max, iPhone 13 Pro Max, iPhone 14 Plus:

1284×2778

iPhone 14 Pro:

1179×2556

iPhone 14 Pro Max:

1290×2796

Android:

  • 720×1280
  • 1080×1920
  • 480×854
  • 480×800
  • 540×960
  • 600×1024
  • 800×1280
  • 1440×2560
  • 320×480
  • 1080×1812
  • 1080×1800
  • 720×1208
  • 375×667
  • 320×568
  • 1440×2960
  • 1080×2160

iPad:

iPad, iPad 2, iPad Mini:

768×1024, 1024×768

iPad 3, iPad 4, iPad Air, iPad Air 2, 2017 iPad, iPad Mini 2, iPad Mini 3, iPad Mini 4, 9.
7″ iPad Pro:

2048×1536, 1536×2048

10.5″ iPad Pro:

2224×1668, 1668×2224

11″ iPad Pro:

2388×1668, 1668×2388

12.9″ iPad Pro:

2732×2048, 2048×2732

10.9″ iPad Air:

2360×1640, 1640×2360

10.2″ iPad:

2160×1620, 1620×2160

8.3″ iPad mini:

2266×1488, 1488×2266

Surface & Android планшеты:

  • 2736×1824
  • 2048×1536
  • 1024×600
  • 1600×1200
  • 2160×1440
  • 1824×2736
  • 1536×2048
  • 600×1024
  • 1200×1600
  • 1440×2160

Ключевые слова обоев:

  • простой фон
  • CSS

Лицензия:

Некоммерческое использование, DMCA Связаться с нами

Pxfuel

    org/ImageGallery»>
  • 3840x2160px силуэт горы, простой, простой фон, минимализм, черный фон, закат, горы, цифровое искусство, HD обои
  • 2880x1800px простой фон, синий, простой, минимализм, синий фон, абстракция, градиент, HD обои
  • 1920x1200px текстура, простой, темный, простой фон, чёрный фон, гранж, HD обои
  • 3840x2160px звезды, обои, простой, простой фон, минимализм, черный фон, космос, HD обои
  • 1680x1050px черный фон с наложением текста, программирование, код, HTML, CSS, JavaScript, веб-дизайн, HD обои
  • org/ImageObject»> 1920x1080px простой фон, текстура, HD обои
  • 4800x2450px аниме, аниме девушки, маска, простой фон, HD обои
  • 1920x1200px абстрактный, текстура, простой, простой фон, синий, градиент, HD обои
  • 2560x1600px текстура, градиент, простой фон, синий, темный фон, HD обои
  • 1920x1200px Текстура, простой фон, текстура, простой фон, HD обои
  • 1920x1080px Lenovo, простой фон, минимализм, HD обои
  • 1920x1080px простой фон, текстура, HD обои
  • org/ImageObject»> 2560x1440px черный фон с наложением текста, типографика, цитата, простой фон, HD обои
  • 1920x1080px простой, простой фон, градиент, HD обои
  • 1920x1200px темный, простой, простой фон, текстура, черный фон, гранж, HD обои
  • 1366x768px Простой фон, коричневый, текстура, простой фон, коричневый, текстура, HD обои
  • 1920x1200px простой, простой фон, минимализм, аннотация, HD обои
  • 1920x1080px простой, простой фон, минимализм, отпечаток пальца, черный фон, HD обои
  • org/ImageObject»> 1920x1080px жизнь, минимализм, цифровое искусство, простой фон, HD обои
  • 1920x1080px простой, простой фон, минимализм, черный фон, музыка, HD обои
  • 1920x1080px низкий заряд батареи, простой, черный, минимализм, батарея, кофе, черный фон, простой фон, юмор, HD обои
  • 3840x2160px абстрактный, минимализм, оранжевый, простой фон, HD обои
  • 2560x1600px серый, простой фон, градиент, HD обои
  • 1920x1080px Think Outside The Box, простой фон, простой, мотивационный, цитата, минимализм, HD обои
  • org/ImageObject»> 2560x1440px черный фон с наложением текста хаха, юмор, минимализм, простой фон, HD обои
  • 1920x1200px простой темный простой фон текстура черный фон, HD обои
  • 1920x1080px простой фон, XXXTENTACION, минимализм, простой, HD обои
  • 1920x1080px Lenovo, логотип, простой фон, компьютер, черный фон, компьютерные игры, HD обои
  • 1920x1080px простой фон, HD обои
  • 2048x1536px простой фон, текстура, синий фон, HD обои
  • 1920x1200px синий рисунок, простой, простой фон, минимализм, чертежи, HD обои
  • org/ImageObject»> 3840x2160px черный фон, минимализм, горы, закат, простой, простой фон, цифровое искусство, HD обои
  • 2880x1800px зеленый полукруг на черном фоне иллюстрации, минимализм, закат, простой фон, HD обои
  • 1920x1280px чёрный, минимализм, линии, просто, произведения искусства, простой фон, HD обои
  • 1920x1080px темный фон, простой фон, черный фон, HD обои
  • 3840x2160px неон, НАСА, японский, простой, черный фон, минимализм, HD обои
  • 2880x1800px минимализм, цифровое искусство, простой фон, кошки, глаза, HD обои
  • org/ImageObject»> 3840x2160px Портал цифровые обои, простой, простой фон, чёрный фон, Портал (игра), HD обои
  • 1680x1050px серый фон с наложением текста, простой фон, простой, минимализм, иллюстрации, HD обои
  • 1920x1080px простой фон, черный фон, ошибки Windows, ошибки, просто, HD обои
  • 2560x1440px простой фон, текстура, черный, текстурированный, HD обои
  • 1920x1080px простой фон, синий, градиент, HD обои
  • 1920x1200px простой фон, градиент, HD обои
  • 1920x1080px простой фон, черный фон, минимализм, цифровое искусство, карта, карта мира, континенты, полосы, HD обои
  • org/ImageObject»> 1920x1200px желтый подсолнух с черным фоном, цветы, желтые цветы, черный фон, цифровое искусство, желтый, минимализм, простой фон, растения, HD обои
  • 1920x1200px абстрактный, синий, простой фон, цифровое искусство, просто, HD обои
  • 1920x1080px шестиугольник, минимализм, геометрия, простой фон, HD обои
  • 7680x4320px Хоакин Феникс, Джокер, Бэтмен, Джокер (фильм 2019), темный, вселенная DC, простой фон, простой, темный фон, герои фильмов, комиксы, суперзлодей, злодей, комиксы DC, HD обои
  • 2560x1600px минимализм, простой, простой фон, аннотация, HD обои
  • org/ImageObject»> 1920x1080px цифровые обои разных цветов, минимализм, простой, простой фон, аннотация, HD обои
  • 1920x1080px черные тексты, минимализм, простой фон, цитата, мотивация, текст, типография, белый фон, HD обои
  • 1920x1080px Логотип Microsoft Windows, Windows 10, простой, Microsoft Windows, черный фон, HD обои
  • 2560x1440px красочный, градиент, простой фон, красочный, градиент, простой фон, HD обои
  • 1600x1067px текстура, простой фон, HD обои
  • 1920x1080px лев, лев, простой фон, минимализм, монохромный, животные, HD обои
  • org/ImageObject»> 1920x1080px простой фон, камуфляж, узор, HD обои
  • 1920x1080px минимализм, темнота, фэнтези-арт, черный фон, простой фон, цифровое искусство, HD обои
  • 2880x1800px разноцветные воды цифровые обои, вода, разноцветные, жидкость, минимализм, простой фон, чёрный фон, цифровое искусство, HD обои
  • 1920x1080px быть оригинальным наложением текста, минимализм, простой фон, синий фон, типография, HD обои
  • 2560x1440px черный фон с наложением текста, минимализм, черный, типографика, простой фон, HD обои
Похожий поиск:

CSS полукруг | UnusedCSS

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

Ниже показано, как выглядел бы блок с небольшим радиусом границы .

 
 
 .box {
  высота: 10бэр;
  ширина: 10рем;
  радиус границы: 1rem;
  цвет фона: #48abe0;
}

Что произойдет, если радиус границ будет равен или больше половины ширины блока? Вы, вероятно, правильно угадали. Получаем круг.

 
 
 .circle {
  //... остальные стили из прошлого примера
  радиус границы: 5rem;
}

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

 .круг {
  // остальные стили из прошлого примера
  высота: 5рем;
}

Что нам нужно сделать, наряду с уменьшением высоты наполовину, так это иметь радиус только для верхних углов.

 <дел> 
.полукруг {
  высота: 5рем;
  ширина: 10рем;
  радиус границы: 5rem 5rem 0 0;
} 
 <дел> 
 раздел {
  запас: 1рем авто;
  цвет фона: #48abe0;
}

.полукруг {
  ширина: 20рем;
  высота: 10бэр;
  цвет фона: #48abe0;
  радиус границы: 10rem 10rem 0 0;
}

Варианты использования

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

См. Ротатор текста Pen Navigation от Элизабет Оливейра (@miukimiu) на CodePen.

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

См. Pen Half Circle With CSS от Bosko (@BoskoMali) на CodePen.

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

См. Pen CSS Half Circle от Стива Маркса (@xram) на CodePen.

Возможно, вы создаете виджет, требующий эффекта кругового перехода/анимации:

См. Эффект наведения на полукруг пера Ника Иакониса (@nickiaconis) на CodePen.

Заключение

CSS предоставляет очень мощное свойство border-radius . Применительно к размерам элементов и ширине границ это помогает нам создавать формы, которые не предусмотрены в готовом виде. Одним из таких примеров является полукруг. Применив только верхние радиусы к кругу и уменьшив вдвое его высоту, мы можем создать полукруг.

Поделиться в Твиттере · Поделиться на Facebook

  • ← Анимированное выпадающее меню
  • Горизонтальные списки CSS →

Как создать полукруг с помощью CSS

html

7 месяцев назад

от Shehroz Azam

CSS позволяет создавать различные формы, такие как прямоугольники, овалы, круги, квадраты и многое другое. Однако форма, которая чаще всего встречается в веб-приложениях, — это форма круга; потому что это легко сделать и широко используется в целях проектирования.

При разработке веб-сайта добавление полукругов вместо кругов делает его более привлекательным. Более того, формировать полукруги легко и интересно.

В этой статье мы расскажем, как создать полукруг с помощью CSS.

Как создать полукруг с помощью CSS?

Чтобы сделать полукруг, мы будем использовать свойство « border-radius ». Это свойство поможет нам составить полукруг следующими способами:

  • Полукруг сверху
  • Полукруг снизу
  • Полукруг слева
  • Полукруг справа

Давайте подробно расскажем о каждом!

Пример 1. Создание полукруга сверху с помощью CSS

Чтобы создать полукруг сверху, сначала мы укажем элемент «

» внутри тега body нашего HTML-файла.

HTML

Теперь установите подходящие размеры для div, например, мы назначим « width ”значение свойства как “ 180px ” и свойство “ height ” со значением “ 90px ”. На следующем шаге установите для свойства « border-radius » значение « 12rem 12rem 0 0 »; где первая цифра 12rem обрезает верхнюю левую часть div, вторая 12rem обрезает верхнюю правую сторону, третья и четвертая цифры 0 обрезают всю нижнюю часть div. Наконец, чтобы придать цвет кругу, используйте свойство « background-color » со значением «9».0079 фиолетовый ”.

CSS

div {
      ширина: 180 пикселей;
      высота: 90 пикселей;
      border-radius: 12rem 12rem 0 0;
      background-color: фиолетовый;
    }

Сохраните HTML-файл с указанным кодом и откройте его в браузере:

Как видите, мы успешно создали полукруг со свойством border-radius CSS.

Пример 2. Создание полукруга снизу с помощью CSS

Для формирования полукруга снизу мы установим значения свойства border-radius как « 0 0 12rem 12rem ”, где первые два значения представляют верхний левый и верхний правый радиус границы. Мы установили их на 0, чтобы верхняя половина div полностью исчезла. Для нижней части мы только немного обрезали нижнюю левую и нижнюю правую стороны, установив значения 12rem.

CSS

div {
      ширина: 180 пикселей;
      высота: 90 пикселей;
      border-radius: 0 0 12rem 12rem;
      background-color: фиолетовый;
    }

Выходные данные

Пример 3. Создание полукруга справа с помощью CSS

Чтобы создать полукруг справа с помощью CSS, сначала отрегулируйте высоту и ширину контейнера, чтобы получить нужный результат. форма круга. На этот раз установите « width » как « 90px » и « height » как « 180px ». Снова используйте свойство border-radius со значением « 0 12rem 12rem 0 », где первое значение 0 соответствует верхнему левому краю, последнее значение 0 — нижнему левому краю, а второе и третье значения — добавлено для обрезки верхней правой и нижней правой стороны. Применение этих значений сформирует полукруг справа.

CSS

div {
      ширина: 90 пикселей;
      высота: 180 пикселей;
      border-radius: 0 12rem 12rem 0;
      background-color: фиолетовый;
    }

Вывод

Пример 4. Создание полукруга слева с помощью CSS

первое и последнее значение 12rem обрежет верхнюю левую и нижнюю левую стороны div, установка второго и третьего значения на 0 очистит верхнюю правую и нижнюю правую стороны круга. В конце концов, наш левосторонний полукруг будет создан.

CSS

div {
      ширина: 90 пикселей;
      высота: 180 пикселей;
      border-radius: 12rem 0 0 12rem;
      background-color: фиолетовый;
    }

Вывод

Мы предложили различные способы создания полукруга с помощью CSS.

Заключение

Чтобы создать полукруг, мы можем просто использовать свойство CSS « border-radius ».

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

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