css如何实现切出的边界？

Question

我有这个页面样机。

如何实现左边是切出的边界？

感谢

Answer 1

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

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

2. 使用填充的方形div，并将其旋转45度。
   它可以工作，但可能过于简单。在旧版本的IE中，Plus旋转可能会有些痛苦（它可以工作，但是filter的语法很糟糕，默认旋转点与其他所有浏览器不同，所以它可能会让你感到头疼）。对于这样的简单效果，可能会花费太多精力。

3. 使用CSS triangle-borders hack制作三角形。
   这有点不方便，但效果很好。阅读更多关于它的地方：http://jonrohan.me/guide/css/creating-triangles-in-css/

4. 使用SVG。
   SVG是一种基于XML的矢量图形格式。在SVG中创建类似这样的东西是微不足道的。这将是一个很好的解决方案，除了IE8和更早版本不支持SVG。幸运的是，do支持VML，这是一种竞争格式（IE9支持SVG，因此VML将会消亡，但我们需要暂时处理它）。一个很好的解决方案是使用其中一个JavaScript库来即时进行SVG-VML转换。其中有几个 - 例如：尝试这一个：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 
} 

你有padding-left更换任何margin-left上h2。

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