引言:今天讲解伪类提到伪类可以制作一些特殊的效果,也可以用于清除浮动
所以今天讲以下如何用伪类做个铅笔的效果:
如图:
这是我们的一只铅笔,那么我们要怎么做?
在这里我们只用一个标签就可实现这种效果
<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>