CSS
html, body {
background-color: #3498db;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.letter {
background-color: #FFF;
position: relative;
height: 70px;
width: 100px;
overflow: hidden;
}
.letter:before,
.letter:after {
content: '';
position: absolute;
left: 50%;
height: 60px;
width: 60px;
transform: rotate(45deg) skew(-5deg, -5deg);
margin-left: -50px;
height: 100px;
width: 100px;
background-color: #FFF;
}
.letter:before {
bottom: -100%;
box-shadow: -5px -5px 0 0 #3498db;
}
.letter:after {
top: -95%;
box-shadow: 5px 5px 0 0 #3498db;
}