GitLab Logo

HTML
<div class='fox'> <div class='fox__ear left'></div> <div class='fox__ear right'></div> <div class='fox__face'></div> </div>
CSS
.fox { position: absolute; top: 50%; left: 50%; height: 195px; -webkit-transform: translate(-75px, -50%); transform: translate(-75px, -50%); } .fox:after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 150px; background: rgba(255, 255, 255, 0.75); mix-blend-mode: overlay; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } .fox__ear { position: absolute; top: 0; height: 120px; width: 150px; background: rgba(239, 74, 32, 0.8); } .fox__ear.left { -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); } .fox__ear.right { -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); } .fox__face { position: absolute; top: 119px; height: 75px; width: 150px; background: #e73622; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } .fox__face:before { content: ''; position: absolute; left: 50%; bottom: 0; height: 12.5px; width: 150px; background: #c12615; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); -webkit-transform: translateX(-50%); transform: translateX(-50%); } html, body { height: 100%; background: #fff; }
JAVASCRIPT
Expand for more options Login