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

最新推荐文章于 2022-06-29 11:49:19 发布

qq_37996815

最新推荐文章于 2022-06-29 11:49:19 发布

阅读量443

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37996815/article/details/79868824

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

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

如图：

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

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

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

qq_37996815

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用伪类做出一个铅笔的效果

引言:今天讲解伪类提到伪类可以制作一些特殊的效果，也可以用于清除浮动所以今天讲以下如何用伪类做个铅笔的效果：如图：这是我们的一只铅笔，那么我们要怎么做？在这里我们只用一个标签就可实现这种效果 &lt;div class="parent"&gt; &lt;div class="pencil"&gt;&lt;/div&gt; &lt;/div&gt;通过css我们现在形成一只笔的主体部...
复制链接

扫一扫