CSS三角箭頭應用方法介紹

大家知道CSS三角箭頭應用方法嗎?下面我們就給大家詳細介紹一下吧!我們積累了一些經驗，在此拿出來與大家分享下，請大家互相指正。用CSS來制作無圖片帶箭頭的DIV方框(此代碼比較適合追求純代碼者)

這類效果也可以用圖片背景來實現，代碼會更簡潔

CSS代碼：

CSS Code復制內容到剪貼板

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代碼：

XML/HTML Code復制內容到剪貼板

相信大家已經學會CSS三角箭頭應用方法了吧!感謝大家對我們網站的支持!

相關推薦：

CSS中的層分離編程的方法介紹