Diagonal dashed pattern on each the side of paragraph

Question

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

I am trying to add a dashed lateral padding like in the image. Only in the sides of the text. Is there any way I can do that ?

AFAIK the only way to do this would be with an image. I would recommend you set it as a background image, and then give the letters a white `background-color`. That's probably the easiest way, as opposed to making two smaller images to fit on either side. Edit: Web-Tiki's answer below is much better, CSS will work more smoothly and will take less time to load than an image. Do what he said. — Tijmen, Aug 29 '16 at 12:12

score 6 · Accepted Answer · edited May 23 '17 at 12:25

You can use linear gradient for the pattern and the technique described in Line before and after title over image to position it on each side of the title.
It would 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>

This is exactly what I needed. Thank you. – Aug 29 '16 at 12:29 — , Aug 29 '16 at 12:29

Nenad Vracar · Answer 2 · 2016-08-29T12:28:24.950

You could to this with Flexbox, repeating-linear-gradient() and :before and :after pseudo 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>

score 0 · Answer 3 · answered Aug 29 '16 at 12:14

0

just try this:

 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;
}

answered Aug 29 '16 at 12:14

Eldo.Ob

774
4
16

Diagonal dashed pattern on each the side of paragraph

3 Answers3