Diagonal dotted pattern on each side of the paragraph.

Question

<div class="search">
  <p>SEARCH</p>
</div>

Run codeHide result

I am trying to add a dotted side registration, as in the image. Only on the sides of the text. Can I do it?

Answer 1

You can use a linear gradient for the picture and the method described in the Line before and after the title above the image to place it on the sides of the title.
It will be something like this:

.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>

Run codeHide result

Answer 2

You could do this with Flexbox, repeating-linear-gradient()and :beforeand :afterpseudo elements.

.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>

Run codeHide result

Answer 3

:

 div.search{
    width: 100%;
    backgroud-image: url('way/to/bg.png');
  }

div.search < p {
  background-color: rgb(255,255,255);
  padding: 0 10px 0 10px;
}