adding one side incline border style after image - html

Question

Thank you for getting into this question.
i want to add a border/line that have one side incline that works as a divider between image and title. Below is the screenshot.
here is the html i have right now
<div class="entry-wrap">
<img class="x-img x-img-thumbnail" src="{image-src}" alt="Place Alt Text Here">
<div class="cut-border"></div>
<div class="x-recent-posts-content">
<h5>Title</h5>
</div>
Thank you so much for your effort.

Answer 1

Its possible using css, but it would probably be easier if you added that border in photoshop or something and insert it on your page

Answer 2

Note: The shape I use in these example does not match the one in the question. Mainly in that the shape on the question does not go down to the corner. Another difference is that I used a fixed height to define the "border" (it measures 5px vertically everywhere) while the one in the question seems to have a fixed width that takes into account the angle on the "stroke". These are details that make the construction of the polygons a bit more complicated, yet do not invalidate the presented approaches.
CSS Clip-Path
What you want can be done using CSS Clip-Path. Which, by itself will make the cut you want in the image, and also will make the cuts in the div that stands in for border.
Some tweaks are necesary to place the objects ontop of each other (clip path does not affect box sizing).
img {
width:250px;
height:250px;
-webkit-clip-path: polygon(100% 0, 100% 100%, 75% 75%, 0 75%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 75% 75%, 0 75%, 0 0);
display:block;
}
.cut-border {
width:250px;
height: calc(250px * 0.25);
background-color: red;
-webkit-clip-path: polygon(75% 0, 100% calc(100% - 5px), 100% 100%, 75% 5px, 0 5px, 0 0);
clip-path: polygon(75% 0, 100% calc(100% - 5px), 100% 100%, 75% 5px, 0 5px, 0 0);
position:relative;
top: calc(250px * -0.25);
}
.x-recent-posts-content {
position:relative;
top: calc(250px * -0.5);
}
<div class="entry-wrap">
<img src="http://lorempixel.com/250/250/city/" alt="lorempixel"><div class="cut-border"></div>
<div class="x-recent-posts-content">
<h5>Title</h5>
</div>
</div>
One drawback I see is that it does not get pixel perfect cuts (you can see the pieces do not match perfectly, this deffect may or not be visible depending on zoom level). It is possible to hide it, I did not do any of that in the examples above.
Another drawback is that will not work in IE or Edge.
See browser support.
SVG
Instead of trying to solve this with CSS, we can have a stab at it with SVG:
.x-recent-posts-content {
position:relative;
top: calc(250px * -0.25);
}
<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="250" height="250">
<image xlink:href="http://lorempixel.com/250/250/city/" x="0" y="0" width="250" height="250" />
</pattern>
</defs>
<polygon fill="url(#img)" points="250,0 250,250, 187.5,187.5 0,187.5 0,0"></polygon>
<polygon fill="#f00" points="187.5,187.5 250,245 250,250 187.5,192.5 0,192.5 0,187.5" />
</svg>
<div class="x-recent-posts-content">
<h5>Title</h5>
</div>
See browser support.