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

#html #css #html5 #css3

  
SEARCH
     




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

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

Ответы

Ответ 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;
}

  
SEARCH



  
MOST POPULAR





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


Ответ 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;
}

  
SEARCH


  
MOST POPULAR





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