流体在图像周围划分

Question

我希望在网站徽标下有一个形状，但它需要从两侧用橙色条继续，所以它看起来像一个整体。这是我迄今为止创建的the preview。

我已经坚持了好几个小时。请您知道如何实现这一目标并对其负责吗？谢谢！

这是它应该是什么样子。

Answer 1

将.test的背景颜色设置为背景图像中的纯色，然后正确定位。最后将徽标设置为position: absolute（除非你给它一个位置，否则不要担心它不会移动）然后将z-index: 2;设置为将其提升到曲线上方。

（Demo）

.test {
    position: relative;
    background-image: url('//jumbo.elique.cz/img/navbar-bottom.png');
    width: 345px;
    height: 34px;
    top: 64px;
    background-color: #0b1b33;
}
.navbar-brand {
    position: absolute;
    z-index: 2;
}

现在这可能导致背景颜色覆盖背景中的某些总线，为了解决这个问题，您可以将导航包裹在具有相同背景颜色的100px高div中，使其更加均匀< / p>

（Demo）

.wrap {
    background-color: #0b1b33;
    height: 100px;
}