AI专业者开发社区 1 号成员
  •  0 回帖  •  6 浏览  •  4 个月前
 

纯CSS实现tooltip提示框，CSS箭头及形状

本片介绍仅用 CSS 做出 tooltip 那样的提示框及箭头等形状！

首先介绍一下 CSS：after 选择器

定义和用法：( 参考w3school:after 选择器 )

　　：after 选择器在被选元素的内容后面插入内容，使用 content 属性来指定要插入的内容

例：

p:after
{ 
    content:"台词：-";
    background-color:yellow;
    color:red;
    font-weight:bold;
}
View Code

 具体大家可以参考：w3school！

 

下面来介绍用:after 选择器来制作 CSS 箭头等提示框：（这里将一步一步简单的设计，每一步添加的内容就是与前一步多出来的 style 代码内容，注意区别！）
首先，我们的 HTML 代码：

<body>
    <div class="demo"></div>
</body>
View Code

让我们来设置该盒子的样式：

<style>
    .demo{
        background-color: lightgreen;
        height: 100px;
        position: relative;
        width: 100px;
    }
</style>
View Code

截图：

这里需注意我们设置 position 属性为relative，是为了允许我们设置我们的“箭头”（还没有出现）绝对定位并且保持它和我们的盒子有联系！

 

接着我们继续插入“箭头”（还没有出现）基本样式：

<style>
    .demo{
        background-color: lightgreen;
        height: 100px;
        position: relative;
        width: 100px;
    }
    .demo:after{
        content:'';
        position:absolute;
        height:20px;
        width:20px;
        background:yellow;
    }
</style>
View Code

截图：

你将会注意到一些事，一、我们仅仅插入了一个黄色的方块，那个就是我们将要设计成箭头的方块；二、我们设置绝对定位 absolute 以至于我们可以将它移动到我们想要的位置上！

继续，这儿给黄色方块（即“箭头”前身）设置边框，这儿的边框就是箭头的实体，并且去掉黄色方块的内容（通过设置.demo:after 中的样式“height:0;width:0”去掉黄色方块，这里我们省略了黄色方块的 height、width）：

<style>
    .demo{
        background-color: lightgreen;
        height: 100px;
        position: relative;
        width: 100px;
    }
    .demo:after{
        content:'';
        position:absolute;
        //height:20px;
        //width:20px;
        background:yellow;

    border</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">10px solid gray</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>



</style>

View Code

截图：

 

现在再将灰色边框方块设计成箭头形式：

<style>
    .demo{
        background-color: lightgreen;
        height: 100px;
        position: relative;
        width: 100px;
    }
    .demo:after{
        content:'';
        position:absolute;
        //height:20px;
        //width:20px;
        //background:yellow;

    //border</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">10px solid gray</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    border</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">10px solid transparent</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    border-top-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">gray
</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>



</style>

View Code

截图：

OK！我们可以看到箭头成形！

 

下面来设置它的位置为我们想要的（此例箭头移动至下端）：

<style>
    .demo{
        background-color: lightgreen;
        height: 100px;
        position: relative;
        width: 100px;
    }
    .demo:after{
        content:'';
        position:absolute;
        //height:20px;
        //width:20px;
        //background:yellow;

    //border</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">10px solid gray</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    border</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">10px solid transparent</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    border-top-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">gray</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    
    top</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">100%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    left</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">10px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>



</style>

View Code

截图：

到这里基本上完事了

 

下面整体样式设计下（其实就更改了盒子的背景色与箭头颜色相同）：

<style>
    .demo{
        background-color: gray;
        height: 100px;
        position: relative;
        width: 100px;
    }
    .demo:after{
        content:'';
        position:absolute;
        //height:20px;
        //width:20px;
        //background:yellow;

    //border</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">10px solid gray</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    border</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">10px solid transparent</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    border-top-color</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">gray</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    
    top</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">100%</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(255, 0, 0, 1)">
    left</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">:</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 255, 1)">10px</span><span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">;</span>
<span style="background-color: rgba(245, 245, 245, 1); color: rgba(0, 0, 0, 1)">}</span>



</style>

View Code

截图：

 

具体需要什么样的样式可以自行设置了！例如将箭头移动到其他三边可以设置 border-T\R\B\L-color:gray; 和 TRBL(TRBL 是指 top\right\bottom\left) 即可！

当然要修改箭头在盒子边框上的位置时，还需注意：边框 border 的大小不包含在自身盒子尺寸内！所以设计时需要注意 margin 的影响，比如箭头在下边框中居中，我们考虑上面的同时还需添加：“ margin-left:-10px; ”才可居中！

 

结论来自yy 浮萍人生的评论（简洁形象 ~~ 哈哈 ~~）：

此例设计原理：设置伪类选择器盒子的宽度和高度为 0, 那边 border 形成的区域是 [X] 这个样子的，其他三边透明了，所以呢就显示了个三角形！

 

（本文参考：YUI Team:CSS Quick Tip: CSS Arrows and Shapes Without Markup）

原创，转载请注明出处 叁半月