CSS Simple Letter

HTML
<div class='letter'></div>
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; }
JAVASCRIPT
Expand for more options Login