Diagonal overlay on background image with double border - html

Question

I'm trying to create an image like this in CSS.
I have the following code.
#sample {
height: 200px;
width: 300px;
background: url(https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png);
position: relative;
}
#overlay {
height: 300px;
width: 100px;
background: #444;
border-left: 3px solid green;
position: absolute;
right: -20px;
}
<div id="sample">
<div id="overlay">
</div>
</div>
Can I make such an structure using CSS alone ?

Answer 1

You need not use an overlay div. You can use an :after element to achieve the same.
Use overflow:hidden on parent and rotate the after element.
Shadow can be used for double border.
Here is a working example.
#sample {
height: 200px;
width: 300px;
background: url(https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png);
position: relative;
overflow: hidden;
}
#sample:after {
height: 300px;
width: 100px;
content: " ";
background: #444;
border-left: 3px solid green;
position: absolute;
right: -20px;
transform: rotate(25deg);
-webkit-box-shadow: -6px 0px 0px 0px rgba(68, 68, 68, 1);
-moz-box-shadow: -6px 0px 0px 0px rgba(68, 68, 68, 1);
box-shadow: -4px 0px 0px 0px rgba(68, 68, 68, 1);
}
<div id="sample">
</div>

Answer 2

To achieve the result parent div need to be set relative and then set it overflow hidden. To let rest of the child div will be invisible.
After that your child div use transform to rotate the element.
HTML
<div id="sample">
<div id="overlay">
</div>
</div>
CSS
#sample {
height: 200px;
width: 300px;
background: url(https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png);
position: relative;
overflow: hidden;
}
#overlay {
height: 300px;
width: 100px;
background: #444;
border-left: 3px solid green;
position: absolute;
right: -20px;
transform: rotate(25deg);
}
DEMO