是否可以用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/

所以只要结合所有的东西，并得到你想要的。