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

Question

Филимон

html , css

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

Конечно, вот исправленный вопрос: Как правильно сверстать блок с изменяемой высотой, который имеет закругленные границы и фон в виде SVG, не прибегая к использованию clip-path? Я пробовал найти решение в интернете, но без успеха. Здесь ссылка на мой код на Codepen: <a href="https://codepen.io/chaserof/pen/bGyebLo" rel="nofollow">https://codepen.io/chaserof/pen/bGyebLo</a>. Буду благодарен за помощь.

22 мая 2024 г. 9:21

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для создания блока с изменяемой высотой, закругленными границами и фоном в виде SVG без использования clip-path, вы можете использовать следующий CSS код:

```css
.block {
  position: relative;
  background: url('your-svg-background.svg') center center/cover;
  border-radius: 20px;
  padding: 20px;
}

.block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom right, #ff0000, #00ff00);
  border-radius: 20px;
  z-index: -1;
}
```

Просто замените `'your-svg-background.svg'` на путь к вашему SVG файлу с фоном. В этом коде используется псевдоэлемент `::before`, чтобы создать градиентную рамку вокруг блока. Позиционирование и размер фона настраиваются с использованием свойства `background`. 

Надеюсь, это поможет вам создать желаемый эффект на вашем сайте. Если у вас остались вопросы, не стесняйтесь спрашивать. С удовольствием помогу!

Answer 2

Если кому надо, вот решение, получилось сделать адаптивно и без костылей: https://stackoverflow.com/a/78551107/14483561