Для создания div с полигональной формой или с "срезанным" углом можно использовать технику CSS-масок или технику использования псевдоэлементов.
Вариант 1: CSS-маска
1. Создайте блок div с нужным содержимым:
```html
<div class="shape-container">
<div class="content">
<!-- Содержимое блока -->
</div>
</div>
```
2. Примените фоновое изображение и цвет фона к внешнему блоку:
```css
.shape-container {
background: url('путь_к_изображению.jpg');
background-size: cover;
background-position: center;
position: relative;
height: 400px;
}
```
3. Создайте маску с полигональной формой при помощи свойства `mask-image` и определите координаты точек формы:
```css
.shape-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: blue;
-webkit-mask-image: polygon(0 0, 100% 0, 90% 100%, 0 100%);
mask-image: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
```
Вариант 2: Использование псевдоэлементов
1. Создайте блок div с нужным содержимым:
```html
<div class="shape-container">
<div class="content">
<!-- Содержимое блока -->
</div>
</div>
```
2. Примените фоновое изображение и цвет фона к внешнему блоку:
```css
.shape-container {
background: url('путь_к_изображению.jpg');
background-size: cover;
background-position: center;
position: relative;
height: 400px;
}
```
3. Создайте псевдоэлемент с нужной формой и примените к нему задний фон с нужным цветом:
```css
.shape-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: blue;
clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
}
```
Оба варианта позволяют создавать div с полигональной формой или с "срезанным" углом. Вы можете настроить форму в нужном вам месте, изменяя координаты точек формы в свойствах `mask-image` или `clip-path` соответственно.