在使用第三方框架bootstrap的時(shí)候，本以為其是圖片實(shí)現(xiàn)的小箭頭，后來(lái)使用開發(fā)工具查看是用CSS來(lái)實(shí)現(xiàn)的，現(xiàn)記錄如下：

理解完上面?zhèn)晤惖挠梅ê?#xff0c;下面進(jìn)入主題，直接貼上代碼，

border test page

body{background: #fff;}

.borderbottom{

width:0px;

height: 0px;

border-width: 8px;

border-style: solid;

border-color: transparent transparent #333 transparent;

position: absolute;

top: 10px;

}

.borderballoon{

width: 200px;

height: 80px;

background: lightgreen;

border-radius: 5px;

position: relative;

top: 30px;

}

.borderballoon:after{

content: "";

position: absolute;

border-style: solid;

border-color: lightgreen transparent transparent;

border-width: 10px;

bottom: -20px;

right:40px;

}

.flatballoon{

width: 200px;

height: 100px;

border: 1px solid #ccc;

border-radius: 5px;

position: relative;

top: 60px

}

.flatballoon:after{

content: "";

position: absolute;

border-style: solid;

border-color: #ccc transparent transparent;

border-width: 10px;

bottom: -20px;

right:40px;

}

.flatballoon:before{

content: "";

position: absolute;

border-style: solid;

border-color: white transparent transparent;

border-width: 10px;

bottom: -19px;

right:40px;

z-index: 9;

}

主要是定位結(jié)合偽類實(shí)現(xiàn)其效果。

css純樣式導(dǎo)航

純CSS實(shí)現(xiàn)各類氣球泡泡對(duì)話框效果

原文?純CSS實(shí)現(xiàn)各類氣球泡泡對(duì)話框效果 一.關(guān)于純CSS實(shí)現(xiàn)氣泡對(duì)話框 首先,來(lái)張大圖: 上邊這張黃黃的,大大的,圓圓的,有個(gè)小尾巴,文字內(nèi)容有些YY的圖片,就是使用純CSS實(shí)現(xiàn)的氣泡對(duì)話框效果,一 ...

純css寫帶小三角對(duì)話框

在實(shí)際樣式中經(jīng)常會(huì)遇到要寫類似對(duì)話框的樣式,而這種樣式往往會(huì)有一個(gè)小三角,如下所示: 那么如何用css寫出來(lái)呢,其實(shí)很簡(jiǎn)單,先讓父元素相對(duì)定位,然后運(yùn)用css的偽類before或after.就可以寫個(gè) ...

純CSS菜單樣式，及其Shadow DOM，Json接口 實(shí)現(xiàn)

先聲明,要看懂這篇博客要求你具備少量基礎(chǔ)CSS知識(shí), 當(dāng)然如果你只是要用的話就隨便了,不用了解任何知識(shí) 完整項(xiàng)目github鏈接:https://github.com/git-Code-Shelf/M ...

html css鼠標(biāo)樣式，鼠標(biāo)形狀

css鼠標(biāo)手型cursor中hand與pointer Example:CSS鼠標(biāo)手型效果

css 字體樣式設(shè)置大全

css樣式大全(整理版) ? 字體屬性:(font) 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數(shù)值就可以,單位:PX.PD 樣式 { ...

css初始化樣式代碼

為什么要初始化CSS? CSS初始化是指重設(shè)瀏覽器的樣式.不同的瀏覽器默認(rèn)的樣式可能不盡相同,所以開發(fā)時(shí)的第一件事可能就是如何把它們統(tǒng)一.如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面差異.每次新開發(fā) ...

WEB前端開發(fā)CSS基礎(chǔ)樣式全面總結(jié)

Web前端開發(fā)css基礎(chǔ)樣式全面總結(jié) 顏色和單位的使用 顏色 用顏色的名字表示顏色,比如:red 用16進(jìn)制表示演示 比如:#FF0000 用rgb數(shù)值表示顏色,rgb(紅,綠,藍(lán)),每個(gè)值都在0-2 ...

CSS常用樣式及示例

CSS常用樣式及示例 一.簡(jiǎn)介 ? ? ?層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集) ...

隨機(jī)推薦

安卓--Toast

protected?void?onCreate(Bundle?savedInstanceState)?{ super.onCreate(savedInstanceState); requestWind ...

python 標(biāo)準(zhǔn)庫(kù)和第3方庫(kù)的介紹

忘了從哪里來(lái)的了~~~~ Tkinter———— Python默認(rèn)的圖形界面接口.Tkinter是一個(gè)和Tk接口的模塊,Tkinter庫(kù)提供了對(duì)Tk API的接口,它屬于Tcl/Tk的GUI工具組.T ...

JS 之匿名函數(shù)

匿名函數(shù)以及閉包 匿名函數(shù)就是沒(méi)有名字的函數(shù).閉包是指有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù).創(chuàng)建閉包的常見(jiàn)方式是在一個(gè)函數(shù)的內(nèi)部創(chuàng)建另一個(gè)函數(shù).閉包會(huì)攜帶包含它的函數(shù)的作用域,因此會(huì)比其他函數(shù)占用更 ...

VB.Net中點(diǎn)擊按鈕(Button)會(huì)重復(fù)提交兩次表單

在VB.NET程序開發(fā)過(guò)程中遇到一個(gè)問(wèn)題 提交一個(gè)表單時(shí),button的html代碼如下

總結(jié)

以上是生活随笔為你收集整理的html 对话框 flatballoon,CSS纯样式实现箭头、对话框等形状的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。