使这个CSS箭头框符合Safari和IE

Question

一位朋友，制作了这段代码，我为了我们的目的而稍微改进了一下。因为我的小提琴需要1px边框版本的白色bg。

但是，在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>

应该看起来像这样......

Answer 1

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

编辑：修复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个像素，以便从第二个箭头后面显示。

Answer 2

您可以创建一个蒙面三角形，使其落在实际的三角形后面，如下例所示：

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;
}