最新下载
热门教程
- 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; } |
相关文章
- 光遇5.8每日任务怎么做 光遇5月8日每日任务做法攻略 05-08
- coinglass官网安卓版 05-08
- 吃不完的馒头放入冰箱储存,最好是冷藏还是冷冻 蚂蚁庄园今日答案5月9日 05-08
- 蚂蚁庄园小鸡答题今日答案2024年5月9日 05-08
- 蚂蚁庄园每日答题答案2024年5月9日 05-08
- 蚂蚁庄园小课堂今日最新答案2024年5月9日 05-08