16 08月 2015

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

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

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

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

例：

自己实际用到呢带边框

section .deimges::after {  content:'';width:20px;height:20px; position:absolute;border:1px solid #cdcdcd;border-top-color:#fff; border-left-color: #fff;left: 25px;top: 73px;background-color: #fff;

-webkit-transform: rotate(45deg);

} 




\\?

1
2
3
4
5
6
7
p:after
{
    content:"台词：-";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

View Code

具体大家可以参考：w3school！

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

\\?

1
<div class="demo"></div>

View Code

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

\\?

1
2
3
4
5
6
7
8
<style>
    .demo{
        background-color: lightgreen;
        height: 100px;
        position: relative;
        width: 100px;
    }
</style>

View Code

截图：

\

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

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

\\?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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）：

\\?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .demo{
        background-color: lightgreen;
        height: 100px;
        position: relative;
        width: 100px;
    }
    .demo:after{
        content:'';
        position:absolute;
        //height:20px;
        //width:20px;
        background:yellow;
                 
        border:10px solid gray;
    }
</style>

View Code

截图：
\

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

\\?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
    .demo{
        background-color: lightgreen;
        height: 100px;
        position: relative;
        width: 100px;
    }
    .demo:after{
        content:'';
        position:absolute;
        //height:20px;
        //width:20px;
        //background:yellow;
                 
        //border:10px solid gray;
        border:10px solid transparent;
        border-top-color:gray
    }
</style>

View Code

截图：
\

特殊说明，本文版权归 ning个人博客 所有带原创标签请勿转载，转载请注明出处.

本文标题： 纯CSS实现tooltip提示框，CSS箭头及形状

本文网址： http://www.ningguoteng.com/show-139.html

原文地址： http://www.2cto.com/kf/201412/359672.html

发表评论