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

所以只需将所有这些结合起来并得到你想要的东西。