原文地址: https://segmentfault.com/a/1190000015153865
感想: 不难
HTML code:
<div class="pencil"> <!-- taper : 笔尖 --> <span class="taper"></span> <!--barrel : 笔筒 --> <span class="barrel">Think Different</span> <!--eraser : 橡皮擦 --> <span class="eraser"></span> </div>
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; }