最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
纯css实现精美箭头代码
时间:2022-06-25 10:12:28 编辑:袖梨 来源:一聚教程网
图:
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; } |
相关文章
- 《燕云十六声》配置要求介绍 12-25
- 《燕云十六声》搬砖介绍 12-25
- 时空中的绘旅人天宇之间怎么玩 绘旅人天宇之间活动玩法介绍 12-25
- QQ2024年度报告怎么看 2024qq年度报告玩法介绍 12-25
- 归龙潮珠砂什么时候up 归龙潮红缘绮梦卡池介绍 12-25
- 王者荣耀S38赛季有什么更新 12-25