纯CCS绘制成的三角形箭头图案技术详解

apple2k

于 2013-10-08 12:38:20 发布

阅读量693

点赞数

分类专栏： css

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用CSS边框属性创建向上箭头，并利用伪元素:before和:after实现Tooltip效果。通过叠加不同颜色的边框达到设计目的。

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

原文，英文

原文，中文

简单的说是利用边框相互叠加形成的。

比如一个向上的三角形箭头三角形可以这样做。

/* create an arrow that points up */
div.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;  /* left arrow slant */
    border-right: 5px solid transparent; /* right arrow slant */
    border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

另外tooltips 可以使用:before 和:after伪元素

将2个元素叠加在一起一个和边框颜色一致，一个和toolstips的背景色一致，类似《这样的叠放在一起。就可以了。