作家
登录

CSS模拟小箭头的实现代码

作者: 来源:www.28hudong.com 2012-11-19 17:36:56 阅读 我要评论

图:HTML代码: 复制代码代码如下: <div class="pre-wrap"> <div class="pre"> <div class="pre1"></div> <div class="pre2"></div> </div> </div> CSS代码: 复制代码代码如下: .pre-wrap { width: 200px; height: 120px; margin: 50px auto 0; border: 2px solid #F00; border-radius: 4px; position: relative; } .pre { width: 80px; height: 80px; position: absolute; top: 20px; left: 40px; } .pre1 { border-width: 40px; border-color: transparent #F30 transparent transparent; } .pre2 { border-width: 40px; border-color: transparent #FFF transparent transparent; position: relative; top: -80px; left: 15px; } .pre1, .pre2 { /*****设置border-style:dashed;使ie6支持border透明*****/ border-style: dashed solid dashed dashed; /*****设置容器宽高为0*****/ width: 0; height: 0; /*****去掉ie6下默认高度,设置以下属性*****/ line-height: 0; font-size: 0; overflow: hidden; }

  推荐阅读

  使用不带单位的line-height

有的时候,我们为了实现单行文字的垂直居中,会给line-height一个和height相同的固定的值;有的时候,我们为了调整特定的某段文字的行间距,通常会考虑使用百分比或者相对尺寸的em。或许是习惯,于是我们都习惯了>>>详细阅读


本文标题:CSS模拟小箭头的实现代码

地址:http://www.17bianji.com/kaifa2/CSS/16492.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)