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;
}

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

1 个答案: