Только CSS изогнутый или деформированный фоновый блок

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

Он должен быть доступным в формате HTML, поэтому желательно использовать только CSS. Любой цвет фона и любой цвет страницы.

До сих пор я использовал радиальный градиент, но он не гладкий. Border-radius не дает правильной дуги, она должна быть более трехмерной.

Мой прототип использует этот CSS

background: radial-gradient(500rem at 3rem -248rem, transparent 50%, brown 50%);

body {
  background: linear-gradient(45deg, #07edd0, #acf932) 100% 100% fixed;
}

.box1 {
  width: 30em;
  height: 10em;
  background: brown;
  position: relative;
  color: white;
  padding: 2rem;
  margin: 4rem;
  &::before,
  &::after {
    content: "";
    height: 2rem;
    position: absolute;
    left: 0;
    width: 100%;
  }
  &::before {
    background: radial-gradient(500rem at 3rem -248rem, transparent 50%, brown 50%);
    top: -2rem;
  }
  &::after {
    background: radial-gradient(500rem at 3rem 250rem, transparent 50%, brown 50%);
    bottom: -2rem;
  }
}

<div class = "box1">
  <h1>Hello</h1>
  <p>
    Some content
  </p>
</div>

есть ли причина, по которой вы не можете использовать clip-path Это должно быть выполнимо, или?

— 25.07.2024 15:57

clip-path имеет недостаток: не поддерживается адаптивный/относительный размер строк пути. Хорошим подходом может быть mask со встроенным в CSS SVG.

— 25.07.2024 17:20

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

— 25.07.2024 23:11

html css

25.07.2024 15:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы могли бы добавить box-shadow, чтобы придать ему больше глубины.

И какой фактический эффект вы ищете?

body {
  background: linear-gradient(45deg, #07edd0, #acf932) 100% 100% fixed;
}

.box1 {
  width: 30em;
  height: 10em;
  background: brown;
  position: relative;
  color: white;
  padding: 2rem;
  margin: 4rem;
  box-shadow: 15px 0 15px -5px rgba(0, 0, 0, 0.7); /* Enhanced shadow effect */
  border-radius: 10px 0px 0px 10px; /* Rounded corners */
}

.box1::before,
.box1::after {
  content: "";
  height: 2rem;
  position: absolute;
  left: 0;
  width: 100%;
}

.box1::before {
    background: radial-gradient(500rem at 3rem -248rem, transparent 50%, brown 50%);
    top: -2rem;
    border-radius: 10px 10px 0px 10px;
}

.box1::after {
  background: radial-gradient(500rem at 3rem 250rem, transparent 50%, brown 50%);
  bottom: -2rem;
  border-radius: 10px 0px 10px 10px;
}

h1, p {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Optional: shadow for text */
}

<body>
    <div class = "box1">
        <h1>Hello</h1>
      <p>
      Some content
      </p>
    </div>
</body>

Спасибо за попытку, но это не совсем то, что нужно

— 29.07.2024 14:15

25.07.2024 16:30

Ответ принят как подходящий

Вы можете использовать box-shadow для псевдоэлементов:

body {
  background: linear-gradient(45deg, #07edd0, #acf932) 100% 100% fixed;
}

.box1 {
  --width: 30em;
  --shadow-height: 2rem;
  width: var(--width);
  min-height: 10em;
  background: brown;
  position: relative;
  color: white;
  padding: 2rem;
  margin: calc(2 * var(--shadow-height)) 1em;
}

.shadow {
  position: absolute;
  width: 100%;
  height: var(--shadow-height);
  overflow: hidden;
  right: 0;

  &:before {
    content: '';
    position: absolute;
    right: calc(-.1 * var(--shadow-height));
    height: calc(2 * var(--shadow-height));
    width: calc(2.1 * var(--width));
    box-shadow: 0 0 0 calc(2 * var(--shadow-height)) brown;
  }
}

.shadow-top {
  bottom: 100%;
  &:before {
    bottom: 0;
    border-bottom-right-radius: 50%;
  }
}

.shadow-bottom {
  top: 100%;
  &:before {
    border-top-right-radius: 50%;
  }
}

<div class = "box1">
<div class = "shadow shadow-top"></div>
<div class = "shadow shadow-bottom"></div>
    <h1>Hello</h1>
  <p>
  Some content
  </p>
</div>

Спасибо! Это дает гораздо лучший результат на рабочем столе Chrome, он намного более плавный.

— 29.07.2024 14:09

25.07.2024 23:07