在很多网页设计中,经常会用到小角标来标注一些特殊信息,如新品、推荐等,在CSS中实现这个
效果就需要使用到伪元素产生的小三角。
首先,在样式表中设置伪元素before或after,并指定其content为
一个空字符串。然后,设置宽高为0,边框颜色、样式和宽度,使其
生成一个小三角形。
下面是实现CSS小角标的
代码示例:
p:before {
content: "";
width: 0;
height: 0;
border-top: 10px solid transparent; /* 上下两个方向决定了箭头朝向 */
border-bottom: 10px solid transparent;
border-left: 10px solid #fff; /* 左边的大小决定了箭头的宽度 */
position: absolute;
top: 0;
left: -10px; /* 通过left属性来设置左偏移量,让它与文本处于同一水平线上 */
z-index: 999; /* z-index属性控制层级,使其在文本上方显示 */
}
p {
position: relative; /* 设置相对定位,以便让before伪元素实现绝对定位 */
}
使用以上
代码可以在P
标签前面
生成一个小三角形,轻松实现CSS小角标的
效果。