原文地址： 

感想： 不难

HTML code:

        
    
             
             
             
         Think Different    
             
         
        

CSS code:

html, body {
          margin: 0;    padding: 0;    height: 100vh;    display: flex;    justify-content: center;    align-items: center;    background-color: lightskyblue;}.pencil{
          position: relative;    font-size: 10px;    width: 50em;    height: 3.5em;    filter: drop-shadow(5px 10px 3px gray);}/* 笔筒完成 */.pencil .barrel{
          position: absolute;    width: 40em;    left: 4em;    background-color: green;    border-top: 1em solid forestgreen;    border-bottom: 1em solid darkgreen;    color: silver;    line-height: 1.5em;    text-align: center;    text-transform: uppercase;    letter-spacing: 0.1em;}/* 笔尖 边框四部分中右边那部分*/.pencil .taper::before,.pencil .taper::after{
          content: '';    position: absolute;    left: -4em;    border-style: solid;    border-width: calc(3.5em / 2) 4em;}.pencil .taper::before{    /* transparent : 透明的 ; biak*/    border-color: transparent burlywood transparent transparent;}.pencil .taper::after{
          border-color: transparent black transparent transparent;    transform: scale(0.3);}/* 橡皮擦 */.pencil .eraser{
          position: absolute;    right: 0;    width: 6em;    height: 1.5em;    background-color: lightpink;    border-top: 1em solid pink;    border-bottom: 1em solid lightcoral;    border-top-right-radius: 0.5em;    border-top-right-radius: 0.5em;}.pencil .eraser::before{
          content: '';    position: absolute;    top: -1em;    left: 0;    width: 1.5em;    height: 1.5em;    background-color: silver;    border-top: 1em solid lightgray;    border-bottom: 1em solid gray;}