LESS
body {
background-color: #f1f0f3;
}
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
display: flex;
}
.tip {
position: relative;
left: 27px;
top: 6px;
background-color: #000;
-webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
clip-path: polygon(100% 0, 0 50%, 100% 100%);
width: 14px;
height: 20px;
}
.wood {
position: relative;
bottom: 20px;
left: 27px;
z-index: 2;
width: 60px;
height: 72px;
background: -webkit-linear-gradient(top, #f2daad 0%, #d1945c 48%, #ab6b35 83%, #86491d 100%);
background: linear-gradient(to bottom, #f2daad 0%, #d1945c 48%, #ab6b35 83%, #86491d 100%);
-webkit-clip-path: polygon(40px 0, 100% 25%, 100% 75%, 40px 100%, -15px 50%);
clip-path: polygon(40px 0, 100% 25%, 100% 75%, 40px 100%, -15px 50%);
}
.yellow {
position: relative;
z-index: 4;
width: 200px;
height: 32px;
background-color: #F3B63D;
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
}
.yellow:before,
.yellow:after {
display: block;
content: '';
width: 200px;
height: 20px;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.yellow:before {
position: relative;
bottom: 20px;
background-color: #FEE49B;
}
.yellow:after {
position: relative;
top: 12px;
background: -webkit-linear-gradient(top, #d28927 0%, #d28927 40%, #ae641c 100%);
background: linear-gradient(to bottom, #d28927 0%, #d28927 40%, #ae641c 100%);
}
.metal {
position: relative;
bottom: 20px;
z-index: 5;
width: 45px;
height: 72px;
background: -webkit-linear-gradient(top, #b1adad 0%, #fefefe 8%, #fefefe 34%, #a1a0a0 62%, #393536 66%, #8d8989 77%, #aba7a7 91%, #716d6d 100%);
background: linear-gradient(to bottom, #b1adad 0%, #fefefe 8%, #fefefe 34%, #a1a0a0 62%, #393536 66%, #8d8989 77%, #aba7a7 91%, #716d6d 100%);
border-top-right-radius: 20% 80%;
border-bottom-right-radius: 20% 80%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.metal:before,
.metal:after {
content: '';
display: block;
width: 2px;
height: 72px;
background: -webkit-linear-gradient(top, #8f8d8d 0%, #e8e8e8 8%, #dedede 34%, #8a8a8a 62%, #292727 66%, #6b6868 77%, #999696 91%, #575454 100%);
background: linear-gradient(to bottom, #8f8d8d 0%, #e8e8e8 8%, #dedede 34%, #8a8a8a 62%, #292727 66%, #6b6868 77%, #999696 91%, #575454 100%);
margin-left: 5px;
}
.eraser {
position: relative;
bottom: 20px;
right: 5px;
z-index: 1;
width: 45px;
height: 72px;
background: -webkit-linear-gradient(top, #ef8865 0%, #b23c26 48%, #a94932 100%);
background: linear-gradient(to bottom, #ef8865 0%, #b23c26 48%, #a94932 100%);
border-top-right-radius: 80%;
border-bottom-right-radius: 80%;
}
