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