CSS Pencil

HAML
.container .tip .wood .yellow .metal .eraser
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%; }
JAVASCRIPT
Expand for more options Login