Как отверстать такой заголовок?

Question

[gorniawe4ka]

Как средствами css сделать такой заголовок?

У сайста 2 разрешения под 980 и 1280

Answer 1

[Serj-One]

<div class="container">
  <h2>
    <span>О нас</span>
  </h2>
</div>

.container {
  width: 700px;
  margin: auto;
}

h2 {
  text-align: center;
  position: relative;
}
h2:before {
  content: '';
  display: block;
  width: 75%;
  height: 1px;
  background: linear-gradient(90deg, red 70%, blue 70%);
  position: absolute;
  top: 7px;
  left: 0;
}
h2:after {
  content: '';
  display: block;
  width: 75%;
  height: 1px;
  position: absolute;
  background: linear-gradient(90deg, blue 30%, red 30%);
  right: 0;
  bottom: 7px;
}
h2 span {
  padding: 5px 40px;
  background: #fff;
  position: relative;
  z-index: 1;
}

codepen.io/Serj-One/pen/NNYMeE

Answer 2

[pasha fudko]

как я понимаю тут по средине один див с бордер 0, потом 2 hr в теге спан и ниже тоже самое...

Answer 3

[Антон Федорян]

У меня так получилось