具有相同background-image :: after的三角形

Question

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

我只想在该部分之前"反转"该三角形.来自背景图像中的倒三角形<header>.

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

有任何想法吗？

谢谢!

Answer 1

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

我不能想办法用现有的HTML做到这一点,我不得不添加两个div到header.

我在标题的底部添加了两个白条,以阻挡图像底部永远不会被看到的部分.我把before和after正方形中的底部中间,其中的箭头应,然后旋转他们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;
}