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

Метод 1: Радиус границы
Самый простой способ создать форму таблетки — использовать свойство border-radius. Установив значение в половину высоты элемента, вы можете добиться идеальной формы таблетки.

.pill-shape {
  width: 200px;
  height: 50px;
  border-radius: 25px;
}

Метод 2: масштабирование преобразования
Другой подход — использовать свойство transformс функцией scale. Масштабируя элемент по оси X, вы можете создать форму таблетки.

.pill-shape {
  width: 200px;
  height: 100px;
  transform: scaleX(0.5);
  transform-origin: center;
}

Метод 3: Clip-Path
Свойство clip-pathпозволяет определять пользовательские области клипа. Используя форму эллипса с горизонтальным радиусом, превышающим вертикальный, вы можете создать форму таблетки.

.pill-shape {
  width: 200px;
  height: 100px;
  clip-path: ellipse(50% 40%);
}

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

”;
позиция: абсолютная;
ширина: 50%;
высота: 100%;
border-radius: 50 пикселей;
}
.pill-shape:: до {
осталось: 0;
цвет фона: #f00; /* Настройка желаемого цвета */
}
.pill-shape::after {
right: 0;
background-color: #00f; /* Настройка желаемого цвета */

Метод 5: Фон SVG
Использование SVG в качестве фонового изображения также позволяет создать форму таблетки. Установив для размера фона значение Cover, вы можете гарантировать пропорциональное масштабирование SVG внутри элемента.

.pill-shape {
  width: 200px;
  height: 100px;
  background-image: url('pill.svg');
  background-size: cover;
}

Метод 6: Flexbox
Flexbox можно использовать для создания формы таблетки путем настройки гибких свойств дочерних элементов. Установив соответствующие значения flex-grow и flex-shrink, вы можете добиться формы таблетки.

.pill-container {
  display: flex;
  width: 200px;
  height: 50px;
}
.pill-shape {
  flex-grow: 1;
  flex-shrink: 0;
}

Метод 7: CSS Grid
Подобно flexbox, CSS Grid также можно использовать для создания формы таблетки. Определив макет сетки и отрегулировав ширину столбцов, вы можете добиться желаемой формы.

.pill-container {
  display: grid;
  grid-template-columns: 50% 1fr 50%;
  width: 200px;
  height: 50px;
}

Метод 8: Холст
Для более сложных сценариев вы можете использовать холст HTML5 для динамического рисования формы таблетки. Для этого метода помимо CSS требуется некоторый JavaScript.

<canvas id="pill-canvas"></canvas>

#pill-canvas {
  width: 200px;
  height: 100px;
}

const canvas = document.getElementById('pill-canvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(100, 0);
ctx.arcTo(200, 0, 200, 100, 50);
ctx.arcTo(200, 100, 100, 100, 50);
ctx.arcTo(0, 100, 0, 0, 50);
ctx.arcTo(0, 0, 100, 0, 50);
ctx.closePath();
ctx.fillStyle = '#f00'; /* Adjust for desired color */
ctx.fill();

Метод 9: фигуры CSS
Формы CSS позволяют определять элементы непрямоугольной формы. Используя свойство shape-outsideс формой эллипса, вы можете создать фигуру таблетки с помощью CSS Shapes Level 1.

.pill-shape {
  width: 200px;
  height: 100px;
  shape-outside: ellipse(50% 40%);
  float: left;
  margin-right: 20px;
  background-color: #f00; /* Adjust for desired color */
}

Метод 10: CSS-клип
CSS-клип можно использовать для определения области отсечения для элемента. Используя комбинацию свойств clip-pathи clip, вы можете создать форму таблетки.

.pill-shape {
  width: 200px;
  height: 100px;
  clip-path: ellipse(50% 40%);
  clip: rect(0px, 200px, 100px, 0px);
  background-color: #00f; /* Adjust for desired color */
}

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