Каким образом можно оформить данные блоки?

Question

Olivia

%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%BA%D0%B0 , верстка , фронтенд

Каким образом можно оформить данные блоки?

Как лучше создать заголовок, в котором черный элемент будет экспортирован как SVG и использован как задний фон для h1, при этом каждое слово внутри заголовка будет позиционировано с помощью тегов span, и весь заголовок будет иметь определенную ширину для корректного отображения?

18 февраля 2024 г. 0:38

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

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

Answer 1

Для оформления данных блоков можно использовать следующий код:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #header {
      width: 400px;
      background: url('black_element.svg') center center no-repeat;
      text-align: center;
    }
    #header span {
      display: inline-block;
      margin: 0 10px;
    }
  </style>
</head>
<body>
  <h1 id="header">
    <span>Каким</span>
    <span>образом</span>
    <span>можно</span>
    <span>оформить</span>
    <span>данные</span>
    <span>блоки?</span>
  </h1>
</body>
</html>
```

В данном примере мы создали блок заголовка с id "header", установили ширину, задали черный элемент в качестве заднего фона через SVG, выровняли текст по центру и добавили отступы между словами с помощью тегов span. Каждое слово теперь будет позиционировано независимо друг от друга.

Answer 2

Первое как вариант: 
 Уголки можно заменить svg или png картинками, чтобы стало более гладко 
 
 А на второе времени нет, в целом я бы для начала попробовал просто соединить темные блоки фигурными изображениями