纯CSS绘制的铅笔

查看示例网页

HTML代码

<div class="pencil"> 
<span class="taper"></span> 
<span class="barrel">BRIGHTEX STUDIO</span> 
<span class="eraser"></span>
</div>

CSS代码

.pencil{
 width:50em;
 height:3.5em;
 /*outline:1px dashed;*/
 display:flex;
 filter: drop-shadow(0.4em 0.8em 0.3em hsla(0,0%,0%,0.3));
}
.taper{
 width:4em;
 /*background-color:burlywood;*/
 position: relative;
}
.taper::before,
.taper::after {
 content: '';
 position:absolute;
 border-right:4em solid burlywood;
 border-top: calc(3.5em / 2) solid transparent;
 border-bottom: calc(3.5em / 2) solid transparent;
}
.taper::before{	border-right-color:burlywood;}
.taper::after{border-right-color:black;}
.taper::after{
 transform: scale(0.3);
 transform-origin: left;
}
.barrel{
 width:40em;
 background-color:green;
 border-top:1em solid forestgreen;
 border-bottom:1em solid darkgreen;
 text-align:center;
 color:silver;
 text-transform:uppercase;
 line-height:1.5em;
 letter-spacing:0.1em; 
}
.eraser{
 width:6em;
 background-color:lightpink;
 border-top:1em solid pink;
 border-bottom:1em solid lightcoral;
 position:relative;
}
.eraser::before{
 content: '';
 position:absolute;
 width:1em;
 height:3.5em;
 background-color:lightgrey;
 border-top:1em solid silver;
 border-bottom:1em solid gray;
 top:-1em;
}