CSS ellipse() — еліпс для clip-path

Опис

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

При використанні функції ellipse() необхідно коректно встановити значення для напіввеликої та напівменшої осей. Це допомагає досягти бажаної форми еліпса з відповідними пропорціями. Наприклад, вказавши значення ellipse(200px 100px), ви створите еліпс з напіввеликою осю 200 пікселів та напівменшою осю 100 пікселів.

Приклад використання:

.ellipse-container {
  width: 200px;
  height: 100px;
  background-color: #3498db;
  clip-path: ellipse(50% 50%);
}

У даному прикладі ми створюємо контейнер з еліптичною формою за допомогою функції ellipse(). Задаємо розміри контейнера, встановлюємо фоновий колір та еліптичну форму.

правити

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

правити

Порада

Переконайтеся, що значення semi-major-axis та semi-minor-axis відповідають бажаному розміру та пропорціям еліпса.

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

Порада

Використовуйте функцію ellipse() разом з властивістю shape-outside для визначення форми текстових блоків навколо елементів з формою еліпса.

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

Нотатка

Зверніть увагу, що функція ellipse() не підтримується всіма браузерами. Перед використанням переконайтеся, що ваша цільова аудиторія підтримує цю функцію або розгляньте альтернативні способи досягнення бажаного ефекту.

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

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

Синтаксис

ellipse(<semi-major-axis> <semi-minor-axis>)

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

<semi-major-axis>

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

автор: Bond

правити

<semi-minor-axis>

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

автор: 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: 150px;
  height: 150px;
  background-color: teal;
  clip-path: ellipse(20px 50px);
  transition: clip-path 0.3s ease;
}

.circle:hover {
  clip-path: ellipse(25px 75px);
}

<div id="description">
  <h2>Вирізаний шматок тексту</h2>
  <p>У цьому прикладі ми використовуємо CSS-функцію ellipse() для створення вирізаного шматка тексту, що надає йому цікавий вигляд.</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 {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 10px;
  clip-path: ellipse(50px 75px);
  shape-outside: ellipse(50px 75px);
  background-color: green;
}

<div id="description">
  <h2>ellipse(): радіуси й центр</h2>
  <p>Розмір блоків однаковий, змінюється тільки значення clip-path.</p>
</div>

<div id="result">
  <figure>
    <div class="box a"></div>
    <figcaption>ellipse(50% 50%)</figcaption>
  </figure>
  <figure>
    <div class="box b"></div>
    <figcaption>ellipse(70px 70px) — коло</figcaption>
  </figure>
  <figure>
    <div class="box c"></div>
    <figcaption>ellipse(50% 50% at 50% 100%)</figcaption>
  </figure>
</div>

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

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

figcaption {
  margin-top: 8px;
}

.box {
  width: 240px;
  height: 140px;
  background: linear-gradient(135deg, #4c6ef5, #f76707);
}

.a {
  clip-path: ellipse(50% 50%);
}

.b {
  clip-path: ellipse(70px 70px);
}

.c {
  clip-path: ellipse(50% 50% at 50% 100%);
}