Только 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>

🤔 А знаете ли вы, что...
HTML был создан Тимом Бернерсом-Ли в 1989 году.

[РЕШЕНО]Перейти к решению

Html113619 вопросов Css75481 вопрос

Ответы:

Вы могли бы добавить 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>

Решено

Вы можете использовать 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>

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

Ответы:

Интересные вопросы для изучения