CSS三角箭頭應用實踐

2024-07-11 08:29:50

字體：大中小

來源：轉載

供稿：網友

用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')"; }