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

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

突然发现只要设置除了左下角其余三个位置的border-raidus就能实现了……

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

 

个人实现方法为

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

 

 

补充说明：如果在伪类中设置边框绘制三角形的话，有可能会出现以下情况：

 

 其原因是伪类中必须要写的 content:"" 这个属性，他会默认留一个字符的高度。解决办法为

1、设置定位，甚至只需要有定位属性 ( absolute || fixed )即可，具体偏移量不设置也行；

2、直接将字号改为0。这样就能在某些需要用到 相对定位relative 或者 粘性定位sticky 场合使用了。

.box:before {
        /*1、设置定位*/
        /*position: absolute;*/
        /*top: 120px;*/
        /*left: 120px;*/

        /*2、设置字号为0*/
        content: '';
        font-size: 0;

        width: 0;
        height: 0;
        background-color: white;
        border-style: solid;
        border-width: 100px 100px 100px 100px;
        border-color: skyblue orange darkred gray;
    }

 

 

与君共勉。