CSS circle() — круг для clip-path

Опис

Функція circle() в CSS є засобом для створення елементів у формі круга з використанням clip-path. Вона дозволяє легко створювати округлі елементи зі зворотною вирізаною зовнішньою формою, що додає привабливості та естетичного вигляду. Цей підхід особливо корисний для створення круглих кнопок, фігур з нестандартною формою та багато чого іншого.

Щоб використовувати функцію circle() з clip-path, ви можете визначити круглу форму обрізання для елемента. Ось приклад:

.circle-element {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  clip-path: circle(50%);
}

У цьому прикладі ми створюємо елемент з круглою формою обрізання використовуючи функцію circle() та clip-path. Задаємо розміри елемента, фоновий колір та встановлюємо круглу форму обрізання, вказавши радіус через функцію circle().

правити

Загальний опис

правити

Порада

Використовуйте функцію circle() для створення елементів з круглою формою, таких як кнопки, області виділення, маркери тощо.

автор: Bond правити

Порада

Комбінуйте функцію circle() з іншими CSS властивостями, наприклад background-color, border, box-shadow тощо, щоб створювати більш складені ефекти та стилі.

автор: Bond правити

Порада

При використанні аргументів at position та color можна досягти додаткових ефектів та налаштувань для кругових елементів.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

circle(<shape-size>? [at <position>] [color <color>]?)

Функція circle може отримувати 3 значень:

<shape-size>

Вказується розмір кругової форми. Можливі значення в пікселях (px), відсотках (%) або інших одиницях виміру.

автор: Bond

правити

at <position>

Вказується позиція кругової форми. Можливі значення: center, top, right, bottom, left або комбінації цих ключових слів.

автор: Bond

правити

color <color>

Вказується колір кругової форми. Можливі значення: іменовані кольори, шістнадцяткові значення (#RRGGBB або #RGB) або функції кольору, наприклад rgb(), rgba(), hsl() або hsla().

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	37	54	10.1	24	79

Підтримка: мобільні переглядачі

Переглядач
	37	37	54	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<div id="description">
  <h2>Приклад 1</h2>
  <p>Цей приклад демонструє використання CSS-функції circle() для створення круглого блоку, який змінює свій вигляд при наведенні курсору.</p>
</div>

<div id="result">
  <div class="container">
    <div class="circle"></div>
  </div>
</div>

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: center;
}

.container {
  text-align: center;
}

.circle {
  width: 180px;
  height: 150px;
  background-color: teal;
  clip-path: circle(50px);
  transition: clip-path 0.3s ease;
}

.circle:hover {
  clip-path: circle(60px at right center);
}

<div id="description">
  <h2>Вирізаний шматок тексту</h2>
  <p>У цьому прикладі ми використовуємо CSS-функцію circle() для створення вирізаного шматка тексту, що надає йому цікавий вигляд.</p>
</div>

<div id="result">
  <div class="container">
    <div class="excerpt"></div>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
  </div>
</div>

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: center;
}

.text {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.excerpt {
/*   background-color: lightgray;
  color: white;
  display: inline;
  padding: 2px 6px;
  border-radius: circle();
  clip-path: inset(0); */
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  clip-path: circle(50px);
  shape-outside: circle(50%);
  background-color: green;
}

<div id="description">
  <h2>circle(): відсоток, ключові слова й доля тіні</h2>
  <p>Розміри блоків однакові скрізь — 300×100 пікселів.</p>
</div>

<div id="result">
  <figure>
    <div class="box p50"></div>
    <figcaption>clip-path: circle(50%)</figcaption>
  </figure>
  <figure>
    <div class="box closest"></div>
    <figcaption>clip-path: circle(closest-side)</figcaption>
  </figure>
  <figure>
    <div class="box clipped"></div>
    <figcaption>clip-path + box-shadow — тіні немає</figcaption>
  </figure>
  <figure>
    <div class="box rounded"></div>
    <figcaption>border-radius + box-shadow — тінь є</figcaption>
  </figure>
</div>

#result {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

figure {
  margin: 0;
  width: 300px;
  text-align: center;
  font: 12px/1.4 sans-serif;
}

figcaption {
  margin-top: 10px;
}

.box {
  width: 300px;
  height: 100px;
  background: linear-gradient(135deg, #1098ad, #f76707);
}

.p50 {
  clip-path: circle(50%);
}

.closest {
  clip-path: circle(closest-side);
}

.clipped {
  clip-path: circle(closest-side);
  box-shadow: 0 8px 16px rgb(0 0 0 / 0.6);
}

.rounded {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 8px 16px rgb(0 0 0 / 0.6);
}