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

Question

一位 friend 制作了这段代码，我对其进行了一些改进以满足我们的目的。因为根据我的 fiddle ，我们需要带有 1px 边框版本的白色背景。

但是箭头不会在 Safari 和 Internet Explorer 中呈现。

任何建议: fiddle :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

这是我得到的最好的。你需要在末端有 2 个三 Angular 形，一个用于深色轮廓，另一个用白色填充中间。

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