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將其拉到左邊緣。