CSS模拟小箭头的实现代码
CSS模拟小箭头的实现代码
发布时间:2016-12-27 来源:查字典编辑
摘要:图:HTML代码:CSS代码:.pre-wrap{width:200px;height:120px;margin:50pxauto0;bor...

图:

CSS模拟小箭头的实现代码1

HTML代码:

<div>

<div>

<div></div>

<div></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;

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类