本文主要包含CSS,三角箭头等相关知识,佚名 希望在学习及工作中可以帮助到您
用CSS来制作无图片带箭头的DIV方框(此代码比较适合追求纯代码者)
这类效果也可以用图片背景来实现,代码会更简洁
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;