伪元素的层叠样式,以及消息提醒小图标

这几天在做一个课程实训,其中有一个地方需要做出类似的效果

伪元素的层叠样式,以及消息提醒小图标

 其他部分不做赘述,这里主要将【消息提醒】这个小圈。

 

个人实现方法为

.purchase_num {
    position: absolute;
    top: -5px;
    left: 105px;
    min-width: 12px;
    line-height: 12px;
    padding: 1px 3px;
    text-align: center;
    border-radius: 7px;
    background-color: red;
    color: white;
    z-index: 1;
}

.purchase_num:before {
    /*因为是伪元素,所以需要添加 content ,然而这里面会默认留一个字符的高度,使得边框无法实现三角形,因此要将字体改为0*/
    /*其次,最好设置一下层叠性,否则会出现这里的小图标覆盖上面数字的情况*/
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    font-size: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 0;
    border-color: transparent red red transparent;
    background-color: #888;
    z-index: -1;
}

 

数字使用 purchase_num 样式,不需要长度,因为后续更新数据时会自动根据其字符内容来增加长度;

高度也不需要,设置 line-height 为字符大小后,其背景色会自动包裹整个数字;

border-radius 用来设置曲边(不用设置太高)padding用背景色填充扩展这个盒子,让他看上去宽一些;

 

然后就是设置伪类来做左下角的那玩意儿。

因为设置盒子宽高为0,再设置相应边框长度的话,他会自动生成4个面积相等的三角形,就比如

<div style="width: 0; height: 0; 
background-color: #666666;
border-style: solid; border-width: 20px 20px 20px 20px; border-color: skyblue orange darkred gray"></div>

伪元素的层叠样式,以及消息提醒小图标

 

 其中,相邻两条边设置宽度为0的话,剩下部分会组成一个新的小正方形,譬如

        border-width: 60px 0 0 60px;
        border-color: skyblue orange darkred gray

伪元素的层叠样式,以及消息提醒小图标

 

 

因此我们可以看出,4个三角形的组成关系如下:

伪元素的层叠样式,以及消息提醒小图标

 

 需要对应角度时可以自行组合。

 

就拿上面消息提醒的来说,就是选择【右+下】这个组合,并使其定位到元素的左下角处,就能形成这样的一个组合形状:

伪元素的层叠样式,以及消息提醒小图标

 

 

 

当然啦,这样纯边框的形状也是可以添加 border-radius 来使其变成曲边三角形,譬如刚刚那个矩形,添加这么一行,就能使其变成圆形

border-radius: 120px;

伪元素的层叠样式,以及消息提醒小图标

 

 

 

与君共勉。

上一篇:Arithmetic Progression CodeForces - 382C


下一篇:【JavaScript】笔记(2)--- ECMAScript初步(变量,函数,数据类型等相关知识)