如何在带有HTML / CSS的网页中添加斜线？

Question

我正在尝试在网页中生成平行四边形/斜杠外观，如下所示：

将两个div粉碎在一起很容易，然后在矩形旁边有一个矩形，但是这个斜线令人难以置信。纯CSS或HTML是否可行？我看过的所有示例都使用SVG。

Answer 1

html,
body {
    min-height: 100%; /* demo only */
}

#page {
    min-height: 100vh; /* demo only */
}

#page:before {
    content: '';
    position: absolute;
    width: 25%;
    height: 150%;
    left: -10%;
    top: -25%;
    background: #F6990D;
    transform: rotate(4deg);
    border-right: 4px solid #FEBF78;
}

<div id="page"></div>