Блог

Главная - Вопросы по программированию - Преобразование Css смотрите на скриншоте ниже

Преобразование Css смотрите на скриншоте ниже

#css

#css

Вопрос:

Я новичок в css, может кто-нибудь помочь мне, как добиться этого в css, у меня есть скриншот ниже введите описание изображения здесь

Ответ №1:

 *{
box-sizing: border-box;
}
div{
    padding:20px;
    background:blue;
    width:100%;
    height:100%;
}
h1 {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  align-items: center;
  background:white;

}

h1 span{
      background:black;
      color:white;
      border-radius: 10px;
      padding: 5px 10px ;
}


h1:before,
h1:after {
  content: "";
  display: block;
  border-top: 2px solid currentColor;
}  
 <div>
<h1>
    <span>LATEST WORK</span>
</h1>
</div>

Ответ №2:

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

Однако вы можете добиться того, чем поделились на скриншоте, следующим образом:

 body {
  margin: 0;
}

.banner {
  text-align: center;
  position: relative;
}

.line {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  width: 100%;
  background-color: darkslategray;
  transform: translateY(-50%);
  z-index: -1;
}

.text {
  color: white;
  background-color: darkslategray;
  padding: 5px;
  border-radius: 10px;
}  
 <div class="banner">
  <span class="line"></span>
  <span class="text">LATEST WORK</span>
</div>

Строка расположена позади текста с z-index помощью . Обратите внимание на transform необходимость правильного центрирования строки по вертикали с текстом. Вы также могли бы добиться чего-то подобного с меньшим количеством элементов DOM, используя псевдоэлементы before и after.