最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯css实现精美箭头代码
时间:2012-01-19 编辑:简简单单 来源:一聚教程网
图:
HTML代码:
代码如下 | 复制代码 |
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; } |
-
下一个: css实现图片垂直居中方法
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26
- css复合选择器的具体使用方法介绍 10-26
- css三列自适应布局教程 10-26