html - 具有相同背景图像的三 Angular 形::之后

Question

这是我的代码:http://jsfiddle.net/u2DAr/1/

我只是想“反转”该部分之前的三 Angular 形。来自 <header> 的背景图像中的倒三 Angular 形.

我试过这个:http://jsfiddle.net/u2DAr/2/但它不会继续与 <header> 相同的背景.

有什么想法吗？

谢谢!

Answer 1

这是我的尝试:http://jsfiddle.net/u2DAr/4/

我想不出用现有的 html 来做的方法，我不得不在 header 中添加两个 div。

我在页眉底部添加了两个白色条，以遮挡永远不会看到的图像底部。我将 before 和 after 方 block 放在底部中间应该是箭头的位置，然后将它们旋转 45 度以形成一个箭头“间隙”，以便图像可以窥视。

header:before, header:after {
    position:absolute;
    content:'';
    width:50px;
    height:50px;
    background:#f5f5f5;
    top:100%;
    -webkit-transform:translateY(-30px) rotate(45deg);
    -webkit-transform-origin:0 0;
    transform-origin:0 0;
    transform:translateY(-30px) rotate(45deg);
    z-index:1;
}

header:before {
    left:calc(50% - 25px);
}

header:after {
    left:calc(50% + 25px);
}

.white {
    background:#f5f5f5;
    width:calc(50% - 25px);
    height:30px;
    position:absolute;
    bottom:0;
    border-color:orange;
}

.white.left {
    left:0;
}

.white.right {
    right:0;
}