Stripes Border like sample image css - html

Question

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:
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?

Answer 1

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>

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