Bootstrap位置元素到容器

Question

我这里有一个jsfiddle - https://jsfiddle.net/awyory2a/

它是一个全宽幅图像，上面有一个包含标题的引导容器。

我有两个div位于底部居中并倾斜以创建一个切出的三角形，显示下面的图像。

我的简单问题是我可以定位div，以便切割出的三角形显示在标题下方，以便固定在下方 引导容器的左侧，如附图所示。

.header {
    background-image: url(http://lorempixel.com/1000/400/);
    background-size: cover;
    height: 350px;
    overflow: hidden;
    position: relative;
}
h1 {
    color: white;
}
.bar {
    background: #aaa;
    width: 1000px;
    height: 80px;
    position: absolute;
    bottom: 0;
}
.bar-left {
    transform: skewX(-60deg);
    left: 50%;
}
.bar-right {
    transform: skewX(60deg);
    right: 50%;
}

Answer 1

那并不容易。但是有一个解决方案：使用clip-path CSS属性：

clip-path: polygon(15px 0, 100% 0, 100% 80%, 155px 80%, 85px 90%, 15px 80%);

这里的技巧是让两个具有相同背景图像的块，这样一个块在容器外面，另一个块在内部（和剪切）。只需确保图像宽度足以作为背景正确定位。

Demo

Answer 2

如何将bar-left和bar-right职位设置为：

.bar-left{
    transform: skewX(-60deg);
    left: 20%;
}

.bar-right{
    transform: skewX(60deg);
    right: 80%;
}

Fiddle

<强>更新 如果你想让它更具响应性，那么当你调整浏览器大小时，它就不会移动。

请改为：

.bar-left{
    transform: skewX(-50deg);
    left: 65px;
}

.bar-right{
    transform: skewX(50deg);
    right: calc(100% - 65px);
}

Fiddle

Answer 3

如果你只是用类＆＃39; .bar＆＃39;来改变div的背景颜色怎么办？从灰色到白色（或任何所需的颜色以匹配父元素的背景）？这会产生三角形在标题之外的错觉。

以下是我根据我的建议给你的jsfiddle拍摄的截图：

我希望这会有所帮助