使这个CSS箭头框在Safari和IE中兼容

问题描述：

一位朋友编写了这段代码，我对它进行了细化以适应我们的目的。因为我们需要按照我的小提琴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>

应该是这样的...... enter image description here

你能张贴它应该是什么样子的图片吗？ –

点击小提琴！ :)看到问题（添加图片） – 422

是的，我看到的东西看起来不像是箭头，我不知道你要做什么确切的形状，所以如果你能让它在浏览器中正确呈现，请告诉我们哪个浏览器。 –

答

您可以创建一个遮掩的三角形背后如以下示例中所示实际之一：

http://jsfiddle.net/BqGyU/

基本上概念是创建两个三角形。看起来最初的概念是在一个偏色背景上有一个白色三角形（使用边框来创建它）。这很好，但是当你想要一个边框时，你不能使用border属性。为了解决这个问题，你可以用边框颜色在它下面创建另一个三角形。然后关闭设置以提供边框的效果。

.arrow-right-top{ 
    position: absolute; 
    top: 1px; 
    left: 300px; 
    width: 0; 
    height: 0; 
    border-top: 49px solid transparent; 
    border-bottom: 49px solid transparent; 
    border-left: 49px solid #fff; 
} 
.arrow-right-bottom{ 
    position: absolute; 
    top: 0px; 
    left: 300px; 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 50px solid #aaa; 
}

Argghh有多接近，没有在Safari中测试过，但在ie和chrome中，三角形底部有1或2个像素的间隙，很棒的工作！现在在safari中测试，yep只是一个或两个像素的差距。 – 422

我不喜欢这个答案的唯一的事情是没有任何实际的代码和/或解释。 '：（' –

@ 422这里是更好的一个:) http://jsfiddle.net/bg37Y/ –

答

这是我得到的最好的。你需要两个三角形的末端，一个用于黑色轮廓，另一个用白色填充中间。

编辑：固定1像素的差距。您需要更改html的顺序，并使边界更大，偏移量为顶部-1，左侧为-1。

你的HTML改成这样

<div id="container"> 
<div class="rectangle"></div> 
<div class="arrow-right dark"></div> 
<div class="magicrect"></div> 
<div class="small-rectangle"></div> 
<div class="arrow-right"></div> 
</div>

，并添加CSS类

.dark { 
top:-1px; 
border-left: 52px solid #aaa; 
border-top:51px solid transparent; 
border-bottom:51px solid transparent; 
left:299px;

}

这台第一箭头是第二个箭头后面有一个深色，然后将其推出1个像素，以便从第二个箭头后面显示。

良好的工作，也是类似的问题，以@约瑟夫，似乎有一个1 px的差距在三角形（箭头点），但伟大的工作 – 422

只是固定的1px问题 –

英镑的努力，你们是好的！ – 422

使这个CSS箭头框在Safari和IE中兼容

相关推荐