如何用伪类做出一个铅笔的效果

CSS伪类绘制铅笔

最新推荐文章于 2022-09-01 16:16:59 发布

原创最新推荐文章于 2022-09-01 16:16:59 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍使用纯CSS及伪类实现铅笔图形的方法。仅用一个HTML元素，通过设置CSS样式和伪类`:after`的边框属性，巧妙地绘制出铅笔头部。文章详细解释了每个步骤。

引言:今天讲解伪类提到伪类可以制作一些特殊的效果，也可以用于清除浮动

所以今天讲以下如何用伪类做个铅笔的效果：

如图：

这是我们的一只铅笔，那么我们要怎么做？

在这里我们只用一个标签就可实现这种效果

 <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>