怎么用纯CSS制作带小三角的tooltip提示框

html-css05

怎么用纯CSS制作带小三角的tooltip提示框,第1张

使用CSS制作小三角形实际就是通过控制块元素的边框来实现的。

例如:

<style>

.triangle-up {

    width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-bottom: 100px solid red

}

.triangle-down {

    width: 0

    height: 0

    border-left: 50px solid transparent

    border-right: 50px solid transparent

    border-top: 100px solid red

}

.triangle-left {

    width: 0

    height: 0

    border-top: 50px solid transparent

    border-right: 100px solid red

    border-bottom: 50px solid transparent

}

.triangle-right {

    width: 0

    height: 0

    border-top: 50px solid transparent

    border-left: 100px solid red

    border-bottom: 50px solid transparent

}

</style>

<div class='triangle-down'></div> <!--向下三角形-->

<div class='triangle-up'></div> <!--向上三角形-->

<div class='triangle-left'></div> <!--向左三角形-->

<div class='triangle-right'></div> <!--向右三角形-->

原理就是设置块元素的三条边透明掉(tranparent)

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">

这个需要你在css标签内写css的样式才会提示。外部写是不会提示的。

</style>

</head>

<body>

</head>

<body>

</body>

</body>

</html>

sublime我个人认为除了不像zend那样能报错外,还是一款非常不错的软件,至少能让程序写代码那么反感了,毕竟该软件界面很美观

然后具有强大的联想功能比如你<>空的页面你在中间填写一个html 直接会吧body title head补全,其他的联想也极为出色,慢慢去摸索吧!很厉害的呦,如果是新手的话,报错了 多看看网页上的报错内容查错,厉害的程序是逻辑强,改错能力强的 嘿嘿