一位朋友编写了这段代码,我对它进行了细化以适应我们的目的。因为我们需要按照我的小提琴1px边框版本的白色bg。使这个CSS箭头框在Safari和IE中兼容
但是,在Safari和Internet Explorer中不显示箭头。
任何建议:小提琴:http://jsfiddle.net/ozzy/vHLJU/2/
代号:CSS
#container{
position:relative;
margin:10px;
}
.rectangle{
position:absolute;
width: 200px;
height: 100px;
background: #fff;
border:1px solid #aaa;
}
.small-rectangle{
position: absolute;
top: 25px;
left: 200px;
width: 100px;
height: 50px;
background:#fff;
border:1px solid #aaa;
border-left:2px solid #fff;
}
.magicrect{
position:absolute;
top: 0px;
left: 200px;
width: 99px;
height: 100px;
border-right:1px solid #aaa;
border-left:none;
}
.arrow-right{
position: absolute;
top: 0px;
left: 300px;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid #fff;
}
HTML是:
<div id="container">
<div class="rectangle"></div>
<div class="magicrect"></div>
<div class="small-rectangle"></div>
<div class="arrow-right"></div>
</div>
应该是这样的......
你能张贴它应该是什么样子的图片吗? –
点击小提琴! :)看到问题(添加图片) – 422
是的,我看到的东西看起来不像是箭头,我不知道你要做什么确切的形状,所以如果你能让它在浏览器中正确呈现,请告诉我们哪个浏览器。 –