是否可以用css實現斜邊？

Question

我試圖玩弄的CSS邊界，但無法弄清楚如何實現以下「四四方方」的樣子：

這可能嗎？如果是這樣（不要使用深色背景，因爲它是在那裏添加對比度）

Answer 1

這是可能的 - 使用:after和一些額外的CSS技巧與邊界。

例

http://jsfiddle.net/EaZ8r/3/

CSS

body { 
    background: #000; 
} 

#box { 
    height: 150px; 
    width: 200px; 
    background: #fff; 
    margin: 0 auto; 
    position: relative; 
} 

#box:after { 
    display: block; 
    background: blue; 
    width: 180px; 
    height: 0px; 
    border: 10px #000 solid; 
    border-top: 15px #eee solid; 
    content: ""; 
    position: absolute; 
    bottom: 0px; 
} 

它是如何工作的？

這裏最主要的是很好的理解border如何被瀏覽器淹沒。看看這個例子：http://jsfiddle.net/n2nsB/。當兩個邊界彼此相遇時，畫布會在它們之間分裂，導致某種三角形淹沒在那裏。這是非常有用的，因爲兩件事情：

1. 首先，border-width可以單獨爲所有4個邊框設置，所以你可以改變分割的角度！檢查例子：http://jsfiddle.net/n2nsB/1/
2. 第二，但更重要的是：你可以設置border-color等於background使其無形！例如：http://jsfiddle.net/n2nsB/2/
3. 甚至可以設置邊框，當元素沒有高度時，邊框只能是該元素被淹沒的東西。例如：http://jsfiddle.net/n2nsB/3/

另一方面，你也應該知道如何:after僞元素的作品。你可以在網上找到很多有關這方面的很好的教程。我建議這一開始：http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

所以只要結合所有的東西，並得到你想要的。