关于使用css伪类实现小图标

最新推荐文章于 2024-08-12 12:31:02 发布

转载最新推荐文章于 2024-08-12 12:31:02 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/poilk/p/6488881.html

本文介绍了一种使用纯CSS创建三角形装饰元素的方法，通过边框颜色和样式的巧妙组合实现，适用于网页设计中需要小图标或指示箭头等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果:




.person_use>span{
    display:block;
    width:0;
    height:0;
    border-width:10px;
    border-style:solid;
    border-color:transparent  transparent #ddd transparent ;
    position:absolute;
    top:-20px;
    left:50%;
    margin-left: -5px;
}
.person_use>span>em{
    display:block;
    width:0;
    height:0;
    border-width: 10px;
    border-style:solid;
    border-color: transparent transparent #fff transparent  ;
    position:absolute;
    top:-9px;
    left:50%;
    margin-left: -9px;
}