css实现tag

最新推荐文章于 2024-04-08 17:29:11 发布

长安古意

最新推荐文章于 2024-04-08 17:29:11 发布

阅读量4.1k

点赞数

分类专栏： css样式文章标签： css

本文链接：https://blog.csdn.net/aiyishengyishi/article/details/53411489

版权

css样式专栏收录该内容

7 篇文章 0 订阅

订阅专栏

新的需求要求实现一个可适应的tag，如下图所示：

这里写图片描述
一开始实现的时候，想法过于简单，把标签整个切成一个背景图，结果发现当文字的长度不固定的时候，将会把图形拉扯变形，十分难看，为了解决这个问题，在同事的点拨下，决定把背景图切成两部分，即：

这里写图片描述

————–切图容易拼凑难，且切且珍惜—————————

当我切图完毕打算拼在一起的时候，发现问题来了
无论是(第一张图片用img展示，第二张图作为span的背景图)，还是(两张图均以span的背景图展示)，都有可能会出现两条线对不齐的情况，也就是第一张图和第二张图不能完美的拼凑成一条线，会有像素级的错位，针对这个问题也进行了很多尝试，然而并没有解决问题。

————–方案一：background插入两个图片—————————

后来想到background里面可不可以放两个图片，然后尝试了一下，发现可以。background: url(“one.png”),url(“two.png”);
background-position: 0% 100%,0.625rem 100%; //(x1 y1,x2 y2)
background-size: 0.76rem 100%,83% 100%; //(w1 h1,w2 h2)

不足：当tag里面的内容过长，将会导致文字溢出背景图片，不能根据文字长短自适应

————–方案二：运用before ，after解决————————–

今天看到一篇文章是用css来写一个tag
我尝试努力实现一个产品心中完美的tag，不过还是没有实现，上个半成品

这里写图片描述

能看出来第一个基本实现了效果图，但是边缘有部分空白，没有完全连接
一开始实现的效果第第二个图，采用before实现前面的实心梯形，after实现后面的空心圆点，后来在里面又添加了一个span,变成
博学多才
里面的span添加before伪类，样式类似于外部的实心梯形，颜色为白色，遮住蓝色实心梯形的多余部分。

  <style type="text/css">
        .tag-li{
           margin-left: 1rem;
           position: relative;
           padding-left: 1rem;
           height: 1.5rem;
           /*border-top: 1px solid blue;
           border-bottom: 1px solid blue;*/
           border: 1px solid blue;
           border-left:none;
           display: inline-block;
           border: 1px solid #1daffa;
           border-left: none;
           box-sizing:border-box;
           border-top-right-radius: 0.2rem;
           border-bottom-right-radius: 0.2rem;
           padding-right: .5rem;
           line-height: 1.5rem;
           color:#1daffa;
       }  
       .tag-li:before{
           /*content: " ";
           background-image: url("http://cdn2.picooc.com/web/res/fatburn/image/studentList/report-icon1a.png");
           background-size: cover;
           left: -.8rem;*/
           content: " ";
           position: absolute;
           top: -1px;
           left: -1.6rem;
           width: .85rem;
           height: 1.5rem;
           height: .75rem;
           display: inline-block;
           border: 1px solid transparent;
           border-right: .8rem solid #1daffa;
           border-top: .4rem solid transparent;
           border-bottom: .4rem solid transparent;

       }
       .tag-li-icon:before{
           content: " ";
           position: absolute;
           top: -1px;
           left: -1.5rem;
           width: .85rem;
           height: 1.5rem;
           height: .75rem;
           display: inline-block;
           border: 1px solid transparent;
           border-right: .7rem solid #fff;
           border-top: .4rem solid transparent;
           border-bottom: .4rem solid transparent;
       }
       .tag-li:after{
           content: " ";
           width: .2rem;
           height: .2rem;
           border-radius: 50%;
           position: absolute;
           top: .6rem;
           left: 0rem;
           border: 1px solid #1daffa;
       }
       </style>        
  <body>
       <span class="tag-li"><span class="tag-li-icon"></span>博学多才</span>
       <span class="tag-li">博学多才</span>
  </body>

————–方案三：运用before ，background解决————————–

虽然上一个版本不是最完美的解决方案，但是，却给我提供了思路，既然可以用before+after
伪类实现，为什么不能用before+background（方案一和方案二的结合）代码如下：

.tag-li, .tag-li1{
            margin-left: 1rem;
            position: relative;
            padding-left: 1rem;
            height: 1.5rem;
            border: 1px solid blue;
            border-left:none;
            display: inline-block;
            border: 1px solid #1daffa;
            border-left: none;
            box-sizing:border-box;
            border-top-right-radius: 0.2rem;
            border-bottom-right-radius: 0.2rem;
            padding-right: .5rem;
            line-height: 1.5rem;
            color:#1daffa;
        }  
        .tag-li1:before{
            content: " ";
            width: .85rem;
            height: 1.5rem;
            background-image: url("one.png");
            background-size: cover;
            position: absolute;
            top: -1px;
            left: -.8rem;
        }
<body>
    <span class="tag-li1">博学多才</span>
</body>