您好,登錄后才能下訂單哦!
CSS三角箭頭應(yīng)用實(shí)踐的示例分析 ,相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
用CSS來(lái)制作無(wú)圖片帶箭頭的DIV方框(此代碼比較適合追求純代碼者)
這類(lèi)效果也可以用圖片背景來(lái)實(shí)現(xiàn),代碼會(huì)更簡(jiǎn)潔
CSS代碼:
div.container{position:absolute;
top:30px;
left:40px;
font-size: 9pt;
display:block;
height:100px;
width:200px;
background-color:transparent;
*border:1px solid #666;
}
s{
position:absolute;
top:-20px;
*top:-22px;
left:20px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
i{position:absolute;
top:-9px;
*top:-9px;
left:-10px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #fff transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
.content{
border:1px solid #666;
-moz-border-radius:3px;
-webkit-border-radius:3px;
position:absolute;
background-color:#fff;
width:100%;
height:100%;
padding:5px;
*top:-2px;
*border-top:1px solid #666;
*border-top:1px solid #666;
*border-left:none;
*border-right:none;
*height:102px;
box-shadow: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
}
HTML代碼:
<div class="container">
<div class="content">
<br>這是框中的文字,可動(dòng)態(tài)顯示。高度自動(dòng)增加,應(yīng)該不錯(cuò)吧^_^
</div>
<s>
<i></i>
</s>
</div>
效果圖:
這次介紹下CSS制作三角箭頭
通常,我們做上圖那個(gè)三角形,一般都是做張圖,而且需要兩張,因?yàn)橐话愣际窍吕藛蔚男Ч枰袀€(gè)hover的樣式,箭頭是反的。那是不是有更好的辦法呢,畢竟要用兩張圖片來(lái)解決這么一個(gè)小問(wèn)題太浪費(fèi)資源了,于是,下面我要用純CSS的方法來(lái)解決這一問(wèn)題,用到的只需css的一個(gè)屬性,就是border-width
我們先來(lái)看個(gè)樣式,如果設(shè)置元素邊框,會(huì)怎么樣:
似乎看不出什么,讓我給四個(gè)邊框加上不同的顏色吧再看看吧:
是不是發(fā)現(xiàn)了些什么?對(duì),讓我們把中間的文字去掉吧:
這樣,就出現(xiàn)4個(gè)三角形了,然后我們?nèi)绻枰敳磕莻€(gè)三角形,只需要將border的left、right、bottom設(shè)置成背景色就行了:
這樣,我們需要的三角形就出現(xiàn)了,并且可以設(shè)置4個(gè)不同方向的了:
樣式代碼很簡(jiǎn)單,就幾句話:
float: left;
border-style: solid; border-width: 10px;
border-color: #000 #ccc #ccc #ccc;
height: 0;
width: 0;
font-size: 0;
實(shí)際應(yīng)用
比如我們要使用向下的箭頭(兼容IE6寫(xiě)法)
HTML代碼:
<div class="demo"><span class="bottom-arrow"></span></div>
CSS代碼:
.demo{position:relative}
.bottombottom-arrow{
position:absolute;
top:10px;
left:0px;
border-style:solid;
border-width:100px;
border-color:#000000 transparent transparent transparent;/*上邊框設(shè)置想要的顏色*/
height:0;
width:0;
font-size:0;
_border-color:#000000 tomato tomato tomato ; /*邊框透明色 For IE6-*/
_filter:chroma(color=tomato);/*邊框透明色 For IE6-*/
}
說(shuō)明:
這里的演示是用了邊框透明色,如果你用不到透明的話,直接設(shè)置border-color為你需要的顏色就可以了,免去為了兼容IE6的透明邊框?yàn)V鏡寫(xiě)法
Chroma屬性可以設(shè)置一個(gè)對(duì)象中指定的顏色為透明色,它的表達(dá)式如下:
Filter:Chroma(color=color)
這個(gè)屬性的表達(dá)式是不是很簡(jiǎn)單,它只有一個(gè)參數(shù)。只需把您想要指定透明的顏色用Color參數(shù)設(shè)置出來(lái)就可以了。
看完上述內(nèi)容,你們掌握CSS三角箭頭應(yīng)用實(shí)踐的示例分析 的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。