<div class="block">
<div class="corner" style="transform: rotate(270deg); top: -40px; left: -40px;"></div>
<div class="corner" style="transform: rotate(180deg); bottom: -40px; left: -40px;"></div>
<div class="corner" style="transform: rotate(90deg); bottom: -40px; right: -40px;"></div>
<div class="corner" style="transform: rotate(0deg); top: -40px; right: -40px;"></div>
</div>
* { box-sizing: border-box; margin: 0px; padding: 0px; }
.block {
width: 200px;
height: 100px;
background-color: #fff;
position: relative;
border: 1px solid black;
margin: 40px;
}
.corner {
display: block;
width: 40px;
height: 40px;
background-color: #fff;
position: absolute;
}
.corner:before {
position: absolute;
content: '';
width: 30px;
height: 30px;
left: 0;
top: 5px;
border-left: 1px solid black;
}
.corner:after {
position: absolute;
content: '';
width: 30px;
height: 30px;
bottom: 0;
right: 5px;
border-bottom: 1px solid black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.