css如何实现切割边框？

Question

我有这个页面样机。

如何在左侧实现切割边框？

感谢

Answer 1

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

1. 只需使用三角形图形 简单明了的答案。可能不是你想要的东西。

2. 使用填充的方形div，并将其旋转45度 它有效，但对于这么简单的事情来说可能有些过分。在旧版本的IE中，旋转可能会有点痛苦（它可以工作，但filter语法很糟糕，默认旋转点与所有其他浏览器不同，所以它可能很难实现。）对于像这样的简单效果可能需要付出太多努力。

3. 使用CSS三角边框黑客制作三角形 它有点hacky，但效果很好。在此处阅读更多相关信息：http://jonrohan.me/guide/css/creating-triangles-in-css/

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

您使用哪种解决方案取决于您;这取决于你想要支持哪些浏览器，你是否对使用Javascript感到满意，是否要避免添加不必要的图形等等。

我建议CSS三角边界黑客可能是目前最好的解决方案。在未来，SVG将是一个更好的答案，但目前IE8 / 7/6不支持它的事实是一个杀手。

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

Answer 2

请参阅： http://jsfiddle.net/WP7gY/

这是我能想到的最简单的技巧：在background上添加h2，并将其left center定位。

h2 {
    padding-left: 30px;
    background: url(black-triangle-image.png) left center no-repeat
}

您必须将所有margin-left替换为padding-left上的h2。

如果容器有一些padding-left，您可以在margin-left: -??px上设置h2将其拉到左边缘。