2

I want to create a striped border.

I want to use the img tag or div tag to include the image on top of the Striped Border.

This is how it needs to look like:

enter image description here enter image description here

Now I am trying like this with border image as svg.

.feed-item:after {
  background: #0055b9;
  background: url(../images/studentslab_hover_stripe_bg.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 4vw 2.7vw 2vw 2vw;
  width: 104%;
  opacity: 0;
}

.feed-item:hover:after {
  opacity: 1;
  z-index: -1;
}

But in responsiveness, it's not covering full sometimes because my striped background image has dimension height and width.

So I want to use it like a border. Is there any way?

Dan Is Fiddling By Firelight
  • 5,981
  • 17
  • 77
  • 128
Lemon Kazi
  • 3,308
  • 2
  • 37
  • 67

2 Answers2

3

Use a repeating linear gradient on the pseudo-element and then position it absolutely behind the parent div.

The move it on hover.

div {
  width:150px;
  height: 200px;
  margin:1em auto;
  border:2px solid green;
   position: relative;
  background: white;
}

div:after {
  content:"";
  position: absolute;
  z-index:-1;
  top:0;
  left:0;
height:100%;
  width:100%;
   background: repeating-linear-gradient(
   -45deg, 
   transparent 0, 
   transparent 4px, 
   blue 4px, 
   blue 8px);
  transition:all .25s ease;
  
}

div:hover::after {
  left:8px;
  top:8px;

}
<div>Hover me</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Small note – use transform: translate(8px, 8px) for better performance (no repaint) – Jakob E Dec 22 '18 at 09:11
  • The problem is that Z order doesn't work. My background is being drawn ON TOP OF THE BUTTON, not behind it. Changing the z-orders in the button and :after pseudo element has no effect. – JasonGenX Jan 08 '19 at 22:13
2

You can consider a multipe background coloration like below:

.box {
  width: 100px;
  height: 200px;
  border-right:  10px solid transparent;
  border-bottom: 10px solid transparent;
  background: 
   linear-gradient(#fff,#fff) center/calc(100% - 2px) calc(100% - 2px) padding-box,
   linear-gradient(blue,blue) padding-box,
   linear-gradient(#fff,#fff) top right  /10px 10px border-box,
   linear-gradient(#fff,#fff) bottom left/10px 10px border-box,
   /* you can replace this gradient with your SVG*/
   repeating-linear-gradient( -45deg, 
     transparent 0, transparent 2px, 
     blue 2px, blue 4px) border-box;
   /**/
  background-repeat:no-repeat;
  display:inline-block;
}
<div class="box"></div>
<div class="box" style="width:200px;"></div>
<div class="box" style="width:200px;height:100px"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    @LemonKazi ah so your SVG incle also the border, I thought it's only the striped ... I think it's better if you can make an SVG with only the stripe as we can do the border with CSS – Temani Afif Dec 22 '18 at 09:58