最新下载
热门教程
- 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; } |
相关文章
- 价格跟踪交易-价格跟踪交易软件 04-25
- 碧蓝航线使用要注意什么 04-25
- 明日之后苹果能做什么食物攻略 04-25
- 以闪亮之名浅栗捏脸数据id攻略 04-25
- 逆水寒手游春归学堂奇遇如何完成 04-25
- 明日之后二层别墅建造蓝图攻略 04-25