JSFiddle - React, Tailwind, and code Playground

HTML

<div class="image">
    <span class="corner TL"></span>
    <span class="corner TR"></span>
    <span class="corner BL"></span>
    <span class="corner BR"></span>
</div>

CSS

body {
    padding: 30px
}
.image {
    background: #ccc;
    width: 300px;
    height: 200px;
    position: relative
}
.corner {
    position: absolute;
    background: #fff;
    border: 2px solid #000;
    width: 20px;
    height: 20px;
    
    /* http://css3please.com/ */
    -moz-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    -webkit-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.Matrix( 
        M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
    zoom: 1;
    
}
.TL {
    top: -10px;
    left: -10px
}
.TR {
    top: -10px;
    right: -10px
}
.BL {
    bottom: -10px;
    left: -10px
}
.BR {
    bottom: -10px;
    right: -10px
}