html - 如何使用 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>