<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<img src="https://picsum.photos/id/195/300/300">
<img src="https://picsum.photos/id/165/300/300">
img {
--w: 250px; /* image width */
--r: 1; /* image ratio */
--c: 113px; /* control the size of the decoration */
width: var(--w);
padding: 10px; /* control the outer space (adjust to understand) */
box-sizing: border-box;
aspect-ratio: var(--r);
object-fit: cover;
--_g:calc(100% - var(--w)/2)/calc(var(--w)*(1 + 1/var(--r)) - var(--c));
background: repeating-conic-gradient(from 45deg,#0000 0 25%,#0005 0 50%) var(--_g);
-webkit-mask: repeating-conic-gradient(from 45deg,#000 0 25%,#0005 0 50%) var(--_g);
}
body {
margin: 0;
min-height: 100vh;
display: grid;
grid-auto-flow: column;
place-content: center;
gap: 50px;
background: #F2E9E1; /* Use a light color */
}
