html - css如何实现镂空边框？

Question

我有这个页面模型。

我如何实现左侧的镂空边框？

谢谢

Answer 1

这个问题有几种可能的解决方案:

1. 只需使用三 Angular 形图形即可。
   简单明了的答案。不过，可能不是您要找的东西。

2. 使用一个填充的正方形 div，并将其旋转 45 度。
   它有效，但对于如此简单的事情可能有点矫枉过正。加上旋转在旧版本的 IE 中可能会有点痛苦(它可以工作，但 filter 语法很糟糕，默认旋转点与所有其他浏览器不同，所以它可能很毛茸茸正确的)。对于这样一个简单的效果，可能需要付出太多努力。

3. 使用 CSS triangular-borders hack 制作三 Angular 形。
   这有点hacky，但效果很好。在这里阅读更多相关信息:http://jonrohan.me/guide/css/creating-triangles-in-css/

4. 使用 SVG。
   SVG 是一种基于 XML 的矢量图形格式。在 SVG 中创建这样的东西是微不足道的。这将是一个很好的解决方案，除了 IE8 和更早版本不支持 SVG。不过幸运的是，它确实支持 VML，这是一种竞争格式(IE9 支持 SVG，所以 VML 快要死了，但我们暂时需要处理它)。一个很好的解决方案是使用其中一个 javascript 库来动态执行 SVG-VML 转换。有几个 - 例如试试这个:http://code.google.com/p/svg2vml/ .或者您可以使用 Raphael使用 javascript 在 SVG 或 VML 中绘制的库。

您使用这些解决方案中的哪一个取决于您；这取决于你想要支持什么浏览器，你是否喜欢使用 Javascript，你是否想避免添加不必要的图形等。

我建议 CSS 三 Angular 形边框 hack 可能是目前最好的解决方案。在未来，SVG 将是一个更好的答案，但目前 IE8/7/6 不支持它是一个 killer 。

三 Angular 形边框 hack 的唯一问题是它在 100% IE6 中不起作用(有关详细信息，请参阅上面链接的页面)，但即使那样它也是可用的。坦率地说，无论如何我都会放弃对 IE6 的支持。