第一篇博客，还不知道怎么写_第一篇博客还请指正怎么说-优快云博客

本文链接：https://blog.youkuaiyun.com/monkeyLIWENQI/article/details/81591591

本文介绍了一种使用HTML和CSS技术制作精美铅笔图标的方法。通过细致的CSS样式设置，包括渐变、边框及定位等技巧，实现了一个高度逼真的铅笔图像效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做个笔记吧，用CSS和HTML做成的铅笔 HTML

CSS
*{
margin: 0;
padding: 0;
}
.pencil{
height: 380px;
position: relative;
width: 60px;
margin: 50px auto 0;
}
.left, .center, .right{
display: inline-block;
height: 300px;
float: left;
}
.left, .right{
width: 15px;
position: relative;
}
.left{
background: -webkit-linear-gradient(left, #f2d41c, #e1c413);
background: -moz-linear-gradient(left, #f2d41c, #e1c413);
}
.right{
background: -webkit-linear-gradient(left, #f2d41c, #e1c413);
bacakground: -webkit-linear-gradient(left, #f2d41c, #e1c413);
}
.center{
width: 30px;
background: #f9dc32;
position: relative;
color: #000;
}
.top{
position: relative;
}
.bottom{
clear: both;
height: 20px;
background: linear-gradient(to bottom, #000, #ffbf00, #000, #ffbf00, #000);
border-radius: 0 0 10px 10px;
}
.top{
border-bottom: 60px solid #ffe8c6;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
}
.top:before{
content: “”;
display: block;
position: absolute;
left: -10px;
border-bottom: 20px solid #000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.center:before{
position: absolute;
content: “”;
display: block;
color: #000;
top: -10px;
border-bottom: 10px solid #f9dc32;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
.left:before{
position: absolute;
content: “”;
display: block;
color: #000;
top: -7px;
border-bottom: 7px solid #f2d41c;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
}
.right:before{
position: absolute;
content: “”;
display: block;
color: #000;
top: -7px;
border-bottom: 7px solid #f2d41c;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
}