Формы изображений CSS
Чтобы обрезать изображения в круги, эллипсы и многоугольники, нужно совсем немного CSS.
Свойство CSS clip-path и функция circle()
Чтобы обрезать элемент по базовой форме, используйте clip-path.
Одна из таких форм — circle(), которая описывается радиусом и позицией.
Круг с радиусом 50%
Для круглой обрезки этого изображения достаточно радиуса 50%.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Clip Path</title>
<style>
img {
clip-path: circle(50%);
}
</style>
</head>
<body>
<h2>Clip an Image to a Circle</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Круг, расположенный справа
Центр круга тоже можно настроить. Он принимает длину, процент или одно из ключевых слов left, right, top и bottom; если ничего не задать, он остаётся в center.
Это изображение сохраняет радиус 50%, но центр круга смещается вправо.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Clip Path Positioned</title>
<style>
img {
clip-path: circle(50% at right);
}
</style>
</head>
<body>
<h2>Clip an Image to a Circle Positioned Right</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
CSS shape-outside и circle()
Когда встроенное содержимое обтекает плавающий элемент, shape-outside определяет форму, по которой оно идёт.
Здесь эту форму задаёт circle(), которая принимает радиус и позицию.
Пример
Текст здесь идёт по кривой, потому что shape-outside — это круг с радиусом 45%, а само изображение обрезано в круг с радиусом 40%.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Shape Outside</title>
<style>
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
</style>
</head>
<body>
<h2>Circle with shape-outside</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit.</p>
</body>
</html>
CSS clip-path и ellipse()
Помимо кругов, clip-path может обрезать элемент и по другим базовым формам.
Одна из них — ellipse(), и ей нужны два радиуса, x и y.
Обрезка в эллипс
Радиусы для эллиптической обрезки этого изображения — 50% для x и 35% для y.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipse Clip Path</title>
<style>
img {
clip-path: ellipse(50% 35%);
}
</style>
</head>
<body>
<h2>Clip an Image to an Ellipse</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Эллипс, расположенный справа
Центр эллипса тоже можно сместить, используя длину, процент или ключевое слово left, right, top или bottom. Если его опустить, это означает center.
При тех же радиусах 50% по x и 35% по y центр эллипса на этом изображении смещён вправо.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipse Clip Path Positioned</title>
<style>
img {
clip-path: ellipse(50% 35% at right);
}
</style>
</head>
<body>
<h2>Clip an Image to an Ellipse Positioned Right</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
CSS shape-outside и ellipse()
Текст может обтекать и эллиптическую форму, если задать shape-outside значение ellipse().
Пример
Это изображение обрезано в эллипс с радиусом x 40% и радиусом y 50%. shape-outside использует чуть больший эллипс, 45% по x и 50% по y, и текст обтекает эту эллиптическую форму.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ellipse Shape Outside</title>
<style>
img {
float: left;
clip-path: ellipse(40% 50%);
shape-outside: ellipse(45% 50%);
}
</style>
</head>
<body>
<h2>Ellipse with shape-outside</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit.</p>
</body>
</html>
Функция CSS polygon()
Форма многоугольника описывается с помощью polygon().
Её аргументы — это список точек, каждая из которых представляет собой пару координат x и y, заданных длинами или процентами. Верхний левый угол — 0 0, а нижний правый угол — 100% 100%.
Эту функцию принимают два свойства: clip-path и shape-outside.
Пример
Многоугольник, которым обрезано это изображение, образует ромб.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Polygon Clip Path</title>
<style>
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
</style>
</head>
<body>
<h2>Clip an Image to a Polygon</h2>
<img src="pineapple.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Свойства и функции CSS
Краткий обзор того, что использовалось в этой главе, — и свойств, и функций:
clip-path- обрезает элемент по базовой форме или источнику SVG.shape-outside- задаёт форму, по которой идёт обтекающее встроенное содержимое.circle()- круг, заданный радиусом и позицией.ellipse()- эллипс, заданный радиусами x и y.polygon()- многоугольник.