Как сделать картинку любой произвольной формы с помощью css свойства clip-path: polygon()
Итак, задача — нужно сделать по дизайну картинки нестандратной формы. При этом просто взять с макета готовую пнг-шку не вариант, нужно, чтобы была возможность загружать любые другие картинки и они подгонялись под шаблон формы. Решение использовать свойство polygon.
HTML
<img class="pol" src="https://denis-creative.com/wp-content/uploads/2024/06/1.jpg" alt="">
CSS
.pol {
object-fit: cover;
object-position: 50% 50%;
width: 760px;
height: 645px;
clip-path: polygon(20% 15%, 60% 0%,100% 40%, 90% 80%, 65% 100%, 20% 80%, 0% 60%, 0% 10%);
}
Для мобильной версии можно просто менять размер картинки, картинка будет центрироваться и заполнять область, которая задана размером.
Пример
Пример, как сделать скрипт для суммы всех полей. При вводе в поле данных идет моментальный…
Отключить кнопку отправки, если поле пустое Javascript Второй вариант для проверки поля
Делаем красвую динамическую круговую диаграмму с помощью Google Charts, диаграмму легко встроить в свой проект,…
Вы можете создать круговую диаграмму в HTML, используя простую функцию CSS под названием conic-gradient. Во-первых, мы добавляем <div> элемент…
