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;
}
