引言:今天讲解伪类提到伪类可以制作一些特殊的效果，也可以用于清除浮动
所以今天讲以下如何用伪类做个铅笔的效果：
如图：
这是我们的一只铅笔，那么我们要怎么做？
在这里我们只用一个标签就可实现这种效果
<div class="parent"> <div class="pencil"></div> </div>通过css我们现在形成一只笔的主体部分
.parent{ width: 1000px; height: 100px; position: relative; top: 200px; } .pencil{ width: 500px; height: 20px; margin: 0 auto; background: red; }如图
现在我们通过伪类的border来制作笔头部分：
.pencil:after{ content: ' '; position: absolute; left: 750px; border-left: 50px solid black; border-bottom: 10px solid blue; border-top: 10px solid yellow; border-right: 50px solid green; }效果如图所示
可以看出我们现在是形成了四个边框，然后我要做的是将黄色，绿色，蓝色的边框隐藏掉就可以做出笔头的效果
.pencil:after{ content: ' '; position: absolute; left: 750px; border-left: 50px solid black; border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-right: 50px solid transparent; }最终效果如图
全部代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>weilei </title> <style> .parent{ width: 1000px; height: 100px; position: relative; top: 200px; } .pencil{ width: 500px; height: 20px; margin: 0 auto; background: red; } .pencil:after{ content: ' '; position: absolute; left: 750px; border-left: 50px solid black; border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-right: 50px solid transparent; } </style> </head> <body> <!--<span>top1</span>--> <div class="parent"> <div class="pencil"></div> </div> </body> </html>