<span style="border-left:100px solid white;border-top:400px solid red;width:0px;position:absolute;top:10px;left:10px"></span>
<span style="border-left:99px solid;border-left-color:transparent !important;border-left-color:yellow;;border-top:396px solid white;width:0px;position:absolute;top:10px;left:12px;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow')"></span>
<span style="border-right:100px solid white;border-top:400px solid red;width:0px;position:absolute;top:10px;left:110px"></span>
<span style="border-right:98px solid;border-right-color:transparent !important;border-right-color:yellow;border-top:392px solid white;width:0px;position:absolute;top:10px;left:110px;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow')"></span>
这个实现实在是有点匪夷所思了。IE/FF/OPERA下面可用。在safari下面计算border的时候有多一个像素的误差,因此这个坐标要做一些调整:
<span style="border-left:100px solid white;border-top:400px solid red;width:0px;position:absolute;top:10px;left:10px"></span>
<span style="border-left:99px solid;border-left-color:transparent !important;border-left-color:yellow;;border-top:396px solid white;width:0px;position:absolute;top:10px;left:12px;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow')"></span>
<span style="border-right:100px solid white;border-top:400px solid red;width:0px;position:absolute;top:10px;left:110px"></span>
<span style="border-right:98px solid;border-right-color:transparent !important;border-right-color:yellow;border-top:392px solid white;width:0px;position:absolute;top:10px;left:110px;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow')"></span>