Чтобы изменить углы фона контейнера на закругленные, можно использовать свойство `border-radius`. Вот пример:
HTML:
```html
<div class="container">
<!-- Ваш контент здесь -->
</div>
```
CSS:
```css
.container {
background-color: #f2f2f2; /* Цвет фона контейнера */
border-radius: 20px; /* Радиус закругления углов */
}
```
Чтобы создать фон, который является частью окружности с хордой, равной ширине экрана, в контейнере, занимающем всю ширину экрана, можно использовать `::before` псевдоэлемент и `linear-gradient`. Вот пример:
HTML:
```html
<div class="container">
<!-- Ваш контент здесь -->
</div>
```
CSS:
```css
.container {
position: relative;
width: 100%;
height: 200px; /* Высота контейнера */
overflow: hidden;
}
.container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200%; /* Высота больше, чем высота контейнера, чтобы закруглить верхний край */
background: linear-gradient(to right, #f2f2f2 50%, transparent 50%); /* Градиентный фон */
z-index: -1;
border-radius: 50%; /* Радиус окружности */
}
/* Добавьте любые другие стили, которые вам необходимы */
```
В этом примере псевдоэлемент `::before` используется для создания фона, являющегося частью окружности. `linear-gradient` устанавливает градиентный фон, где первая половина белая (`#f2f2f2`), а вторая половина прозрачная. Значение `50%` в `background` свойстве указывает, что градиент должен быть равномерным по горизонтали, а `to right` указывает, что градиент должен идти слева направо. После этого прозрачная часть фона будет накладываться на фон контейнера, создавая эффект окружности.
