html - 使用 CSS 偷工减料

Question

我想“剪切”div 的左上角，就像您将页面的 Angular 向下折叠一样。

我想用纯 CSS 做，有什么方法吗？

Answer 1

如果父元素有纯色背景，你可以使用伪元素来创建效果:

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid red;
    width: 0;
}

<div></div>

http://jsfiddle.net/2bZAW/

---

附言 The upcoming border-corner-shape正是您要寻找的。太糟糕了，它可能会被排除在规范之外，并且永远不会在野外进入任何浏览器:(