标签：层叠 width 样式 color radius 设置 20px border 小图标

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

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

 

个人实现方法为

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

 

 

 

与君共勉。

标签：层叠,width,样式,color,radius,设置,20px,border,小图标
来源： https://www.cnblogs.com/ricardox3/p/15943995.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。