对角线 CSS3 背景 Color/Images

Question

基本上我是想把 div 的背景剪掉一个角度。请参见下图的示例：您会注意到导航部分被截断了，下面的 header 图像也被截断了。

有没有办法使用 CSS3 来创建这种效果？我试过这个：

.site-header {
    background-color: #0c3063;
    width: 960px;
    height: 300px;
    @include clearfix;
    position: relative;
    z-index: 1;

    &:after {
        content: "";
        width: 100px;
        position: absolute;
        top: -162px;
        right: -150px;
        width: 300px;
        height: 300px;
        background-color: black;
        transform: rotate(45deg);
        z-index: 2;
    }
}

在上面的示例中，它重叠了，但我知道如何解决这个问题，基本上只需使用 before 而不是 after。但是有更好的方法吗？

我的示例似乎无法将 :after 内容放在其 parent 之前，因此此解决方案并不理想 :( 有什么想法吗？

编辑：https://jsfiddle.net/6x3yenge/1/

谢谢

Answer 1

虽然下面的代码没有达到您想要的图像效果，但它确实可以完成顶部菜单的工作。使用边框创建三角形可以简化很多事情。

JSfiddle link: https://jsfiddle.net/qvjhptpy/

HTML:

<body>
    <div class="menu">
        <div class="main"></div>
        <div class="cut"></div>
    </div>
</body>

CSS:

body
{
    background: yellow;
}

.menu
{
    background: transparent;
    font-size: 0px;  /*In case a gap is coming between .main & .cut nested DIVs (Due to whitespace in HTML code)*/
}

.main
{
    display: inline-block;
    width: 200px;
    height: 100px;
    background: red;
}

.cut
{
    display: inline-block;
    border: 50px solid transparent;
    border-top: 50px solid red;
    border-left: 50px solid red;
}

对角线 CSS3 背景 Color/Images

Diagonal CSS3 Background Color/Images

html

css

diagonal