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/ .当两个边界彼此相遇时， Canvas 在它们之间被分开，是什么让某种三 Angular 形淹没在那里。这可能非常有用，原因有两点:

1. 首先，border-width可以为所有4个边框单独设置，这样你就可以改变分割的 Angular !检查示例:http://jsfiddle.net/n2nsB/1/
2. 其次，但更重要的是:您可以将 border-color 设置为 background 以使其不可见!示例:http://jsfiddle.net/n2nsB/2/
3. 您甚至可以设置边框，当元素没有高度时，是什么使得边框只是被该元素淹没的东西。示例:http://jsfiddle.net/n2nsB/3/

另一方面，您还应该了解:after 伪元素的工作原理。您可以在 Web 上找到很多关于它的非常好的教程。我建议一开始使用这个:http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/

因此，只需将所有这些结合起来即可获得您想要的。