CSS带箭头的DIV方框，自适应高度

2020-01-27 14:18:49

字体：大中小

来源：转载

供稿：网友

请详细了解一下代码，好好研究下，虽然实现起来有些麻烦，不过样子挺让人喜欢，WEB2.0网站中常看到的方框风格，在些告诉喜欢的朋友，方框中的文字，可以动态显示，而且Div边框的高度是自适应的，可自动增加。

<html><head><title>CSS实现带箭头的DIV方框</title><style>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;}div.container{position:absolute;top:30px;left:40px;font-size: 9pt;display:block;height:100px;width:200px;background-color:transparent;*border:1px solid #666;}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;//兼容性，考虑6及之前版本的表现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')"; }</style></head><body><div class="container"><div class="content"><br>CSS实现箭头的边框，我觉得还行吧^_^</div><s><i></i></s></div><br /></body></html>

上一篇：CSS 文字上下颠倒显示

下一篇：CSS Reset，给你一个有用的CSS Reset文件

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注