div+css樣式自制帶小三角的tooltips效果
發(fā)布時(shí)間：2017-10-11 11:32:42 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了 div+css樣式自制帶小三角的tooltips效果,需要的朋友可以參考下
代碼和效果圖如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.tooltips {
position: relative;
width: 300px;
height: 80px;
line-height: 60px;
background: #D7E7FC;
border-radius: 4px;
}
.arrow {
position: absolute;
color: #D7E7FC;
width: 0px;
height: 0px;
line-height: 0px;
border-width: 20px 15px 0;
border-style: solid dashed dashed dashed;
border-left-color: transparent;
border-right-color: transparent;
bottom: -20px;
right: 50%;
}
.tooltips {
position: relative;
width: 300px;
height: 80px;
line-height: 60px;
background: #D7E7FC;
border: 1px solid #A5C4EC;
border-radius: 4px;
}
.arrow {
position: absolute;
width: 0px;
height: 0px;
line-height: 0px;
border-width: 20px 15px 0;
border-style: solid dashed dashed dashed;
border-left-color: transparent;
border-right-color: transparent;
}
.arrow-border {
color: #A5C4EC;
bottom: -20px;
right: 50%;
}
.arrow-bg {
color: #D7E7FC;
bottom: -19px;
right: 50%;
}
</style>
</head>
<body>
<!--先定義一個(gè)相對(duì)定位的盒子div：-->
<div class="tooltips">
<!--給div盒子添加一個(gè)三角型圖標(biāo)-->
<div class="arrow "></div>
<!--給“小三角穿上松緊帶”需要使用兩個(gè)三角形疊加的方式-->
<!--首先我們定義兩個(gè)三角形的div，一個(gè)背景色和盒子的邊框顏色相同，一個(gè)背景色和盒子的背景色一致：-->
<div class="arrow arrow-border"></div>
<div class="arrow arrow-bg"></div>
<!--注意：.arrow-bg和.arrow-border的bottom位置相差為1px（可根據(jù)邊框?qū)挾日{(diào)整）兩個(gè)div的順序不可顛倒。-->
</div>
</body>
</html>
效果展示圖
總結(jié)
以上所述是小編給大家介紹的 div+css樣式自制帶小三角的tooltips效果，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
CSS3 函數(shù)技巧 用css 實(shí)現(xiàn)js實(shí)現(xiàn)的事情(clac Counters Tooltip)
這篇文章主要介紹了如何使用CSS3代碼更好實(shí)現(xiàn)js中效果，clac Counters Tooltip等功能使得代碼更為簡(jiǎn)潔明了,需要的朋友可以參考下2017-08-15純CSS3實(shí)現(xiàn)自定義Tooltip邊框涂鴉風(fēng)格的教程
這篇文章主要為大家介紹了利用純CSS3打造的自定義Tooltip邊框的應(yīng)用，今天的這款Tooltip卻可以用CSS3來(lái)自定義邊框，邊框呈涂鴉風(fēng)格。用CSS3實(shí)現(xiàn)自定義邊框的好處是可以自適2014-11-05用簡(jiǎn)單的jquery+CSS創(chuàng)建自定義的a標(biāo)簽title提示tooltip
這篇文章主要介紹了用簡(jiǎn)單的jquery+CSS創(chuàng)建自定義的a標(biāo)簽title提示tooltip，需要的朋友可以參考下2014-05-21關(guān)于CSS Tooltips(鼠標(biāo)經(jīng)過(guò)時(shí)顯示)的效果
本篇文章，小編為大家介紹關(guān)于CSS Tooltips(鼠標(biāo)經(jīng)過(guò)時(shí)顯示)的效果，有需要的朋友可以參考一下2013-04-10- 有很多新手朋友不知道如何使用css制作帶小三角的tooltip提示框，本人研究整理了一下，曬出來(lái)和大家分享，希望可以幫助你們2012-12-05
純css實(shí)現(xiàn)漂亮又健壯的tooltip的方法
這篇文章主要介紹了純css實(shí)現(xiàn)漂亮又健壯的tooltip的方法的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-04
