效果:
HTML:
<div class="container"> <div class="jar"></div> <div class="pencils"> <div class="pencil one"></div> <div class="pencil two"></div> <div class="pencil three"></div> </div> </div>
CSS:
body { background: #AFE0CE; } .container { width: 200px; height: 300px; position: relative; margin: 200px auto 0; } .jar, .pencil { position: absolute; } .jar { width: 200px; height: 220px; background: #A5C4D4; top: 93px; opacity: 0.5; border: 5px solid #A2B9C4; border-radius: 0 0 20px 20px; border-top: none; } .jar:before, .jar:after { position: absolute; content: ''; background: #FFF; opacity: 0.6; } .jar:before { top: 76px; left: 184px; width: 7px; height: 120px; border-radius: 100px; } .jar:after { top: 200px; left: 184px; width: 7px; height: 7px; border-radius: 50%; } .pencil { z-index: -1; left: 40px; width: 20px; height: 280px; background: #FFBA49; border-radius: 3px; box-shadow: 0 -5px 0 #A6B0B5, 0 -17px 0 #EF5B5B; transform: rotate(-20deg); transform-origin: bottom; } .pencil:before, .pencil:after { position: absolute; content: ''; } .pencil:before { top: 280px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 30px solid #B5864D; } .pencil:after { top: 295px; left: 5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 15px solid #000; } .pencils .one { left: 15px; transform: rotate(12deg); } .pencils .two { left: 30px; transform: rotate(24deg); } .pencils .three { left: 45px; transform: rotate(36deg); }