帝王谷资源网 Design By www.wdxyy.com
用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;
- -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复制内容到剪贴板- <div class="container">
- <div class="content">
- <br>这是框中的文字,可动态显示。高度自动增加,应该不错吧^_^
- </div>
- <s>
- <i></i>
- </s>
- </div>
通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的。那是不是有更好的办法呢,毕竟要用两张图片来解决这么一个小问题太浪费资源了,于是,下面我要用纯CSS的方法来解决这一问题,用到的只需css的一个属性,就是border-width
这样,就出现4个三角形了,然后我们如果需要顶部那个三角形,只需要将border的left、right、bottom设置成背景色就行了:
这样,我们需要的三角形就出现了,并且可以设置4个不同方向的了:
样式代码很简单,就几句话:
CSS Code复制内容到剪贴板- float: left;
- border-style: solid; border-width: 10px;
- border-color: #000 #ccc #ccc #ccc;
- height: 0;
- width: 0;
- font-size: 0;
实际应用
比如我们要使用向下的箭头(兼容IE6写法)
HTML代码:
XML/HTML Code复制内容到剪贴板- <div class="demo"><span class="bottom-arrow"></span></div>
CSS代码:
CSS Code复制内容到剪贴板- .demo{position:relative}
- .bottombottom-arrow{
- position:absolute;
- top:10px;
- left:0px;
- border-style:solid;
- border-width:100px;
- border-color:#000000 transparent transparent transparent;/*上边框设置想要的颜色*/
- height:0;
- width:0;
- font-size:0;
- _border-color:#000000 tomato tomato tomato ; /*边框透明色 For IE6-*/
- _filter:chroma(color=tomato);/*边框透明色 For IE6-*/
- }
说明:
这里的演示是用了边框透明色,如果你用不到透明的话,直接设置border-color为你需要的颜色就可以了,免去为了兼容IE6的透明边框滤镜写法
Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:
- Filter:Chroma(color=color)
这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。
标签:
CSS,三角箭头
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月07日
2024年10月07日
- 群星《前途海量 电影原声专辑》[FLAC/分轨][227.78MB]
- 张信哲.1992-知道新曲与精丫巨石】【WAV+CUE】
- 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】
- 景冈山.1996-我的眼里只有你【大地唱片】【WAV+CUE】
- 群星《八戒 电影原声带》[320K/MP3][188.97MB]
- 群星《我的阿勒泰 影视原声带》[320K/MP3][139.47MB]
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[320K/MP3][148.91MB]
- 刘雅丽.2001-丽花皇后·EMI精选王【EMI百代】【FLAC分轨】
- 齐秦.1994-黄金十年1981-1990CHINA.TOUR.LIVE精丫上华】【WAV+CUE】
- 群星.2008-本色·百代音乐人创作专辑【EMI百代】【WAV+CUE】
- 群星.2001-同步过冬AVCD【环球】【WAV+CUE】
- 群星.2020-同步过冬2020冀待晴空【环球】【WAV+CUE】
- 沈雁.1986-四季(2012梦田复刻版)【白云唱片】【WAV+CUE】
- 纪钧瀚《胎教古典音乐 钢琴与大提琴的沉浸时光》[FLAC/分轨][257.88MB]
- 《国语老歌 怀旧篇 3CD》[WAV/分轨][1.6GB]