css - 是否可以使用 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-colorequal tobackground使其不可见！示例：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/

因此，只需将所有这些结合起来，就可以得到你想要的。