Диагональный штриховой pattern с обоих сторон абзаца

218
07 апреля 2017, 21:06
<div class="search">
  <p>SEARCH</p>
</div>

Я пытаюсь добавить пунктирные боковые отступы, как на изображении.
Только по бокам текста. Как мне это сделать?

Перевод вопроса: Diagonal dashed pattern on each the side of paragraph@Daniel

Answer 1

Вы могли бы это сделать с помощью flexbox, используя repeating-linear-gradient() совместно с :before, :after псевдоэлементами. 

.pattern { 
  display: flex; 
  align-items: center; 
  margin: 10px 0; 
} 
p { 
  margin: 0; 
} 
.pattern:before, 
.pattern:after { 
  content: ''; 
  flex: 1; 
  background-color: #E1E1E1; 
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, white 2px, white 6px); 
  margin: 0 20px; 
  padding: 5px 0; 
} 
.pattern:before { 
  flex: 0 0 20px; 
}
<div class="search pattern"> 
  <p>SEARCH</p> 
</div> 
 
<div class="search pattern"> 
  <p>MOST POPULAR</p> 
</div>

Перевод ответа: Diagonal dashed pattern on each the side of paragraph @Nenad Vracar

Answer 2

Вы можете использовать линейный градиент для pattern и техники, описанные в статье: Line before and after title over image , чтобы расположить его по обе стороны заголовка.

Это будет примерно так: 

.search { 
  margin: .7em auto; 
  overflow: hidden; 
  padding-left:100px; 
} 
.search:before, .search:after { 
  content: ""; 
  display: inline-block; 
  width: 100%; height:0.8em; 
  margin: 0 .5em 0 -105%; 
  vertical-align: middle; 
  background-image: linear-gradient(-45deg, #E0E0E0 25%, transparent 25%, transparent 50%, #E0E0E0 50%, #E0E0E0 75%, transparent 75%, transparent); 
  background-size: 0.5em 0.5em; 
} 
.search:after { 
  margin: 0 -105% 0 .5em; 
} 
.search p { 
  display: inline-block; 
  vertical-align: middle; 
}
<div class="search"> 
  <p>SEARCH</p> 
</div> 
<div class="search"> 
  <p>MOST POPULAR</p> 
</div>

Перевод ответа: Diagonal dashed pattern on each the side of paragraph @web-tiki

READ ALSO
Модуль - Связанные материалы и meta тэг Keywords в Joomle
HTML

Модуль - Связанные материалы и meta тэг Keywords в Joomle

 213
Карусель как на apple или instagram и т д
HTML

Карусель как на apple или instagram и т д

Привет всемЯ очень хочу сделать такой слайдер как у apple

 243
Переход по нужному url
HTML

Переход по нужному url

registrationhtml:

 219
не могу подключить css в php
HTML

не могу подключить css в php

Всем привет не могу соединить css внутри файла indexphp точнее внутри функции помогите пожалуйста Файл index

 324