css - 想要使用 flexbox 在图像上叠加一个 div

Question

我有一系列使用 flexbox 排列的缩放三 Angular 形，它们会根据窗口的拉伸(stretch)方式变大或变小。我想让这些覆盖在图像的底部，给它一种撕纸或山峰的效果。他们将覆盖的图像缩放以适合窗口，三 Angular 形必须跟随图像，随窗口缩放。

我很难找到这个问题的解决方案，需要一些帮助。

这就是我希望三 Angular 形和图像相互关联的方式，在此屏幕截图中三 Angular 形为黑色，图像为灰色。

http://i.imgur.com/KkXq9pc.png

这是元素的 jsfiddle 链接:http://jsfiddle.net/wD2r2/

CSS:

.triangle-up {
margin: 0 auto;
width: 50%;
height: 0;    
padding-left:50%;
padding-bottom: 50%;
overflow: hidden;
}
.triangle-up:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-9999px;
    border-left: 9999px solid transparent;
    border-right: 9999px solid transparent;
    border-bottom: 9999px solid #000000;
    }

.triangle-container {
    display: flex;
    }

.overlay {
    top: -100px;
    left:0px;
    right:0px;
    z-index: 1;
    position: relative;
    margin-top: 10px;
    }

HTML:

<div>

<div>
    <img style="width:100%;" src="images/treeline.jpg" />
</div>

<article class="overlay">
    <div class="triangle-container">
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
        <article>
            <div class="triangle-up" />
        </article>
    </div>
</article>

</div>

我想避免三 Angular 形相对于图像上升或下降或沿窗口两侧移动的影响。我一直试图让它一直沿着底部运行并适当缩放，但没有成功。

非常感谢。

Answer 1

这里有一点，所以我将按顺序解释我所做的一切。

1。棕色/黄色条形容器

为了获得底部的那两个棕色和黄色条，您需要一个容器来放置它们。由于它们周围有黑色，我简单地创建了一个 100% x 40px 的黑色背景的 div:

.bottom
{
    background: black;
    width: 100%;
    height: 40px;
}

2。创建棕色和黄色条

由于棕色和黄色条在同一条线上并且是 block ，我创建了两个宽度为 43% 和一侧边距为 7% 的行内 block 元素，并设置了适当的背景颜色:

.brown, .yellow
{
    display: inline-block;
    width: 43%;
    height: 20px;
    margin: 20px 0 0 0;
}

.brown
{
    background: brown;
    margin-left: 7%;
}

.yellow
{
    background: yellow;
    margin-right: 7%;
}

3。图片边框

由于图像周围有灰色边框，我将图像框大小调整模式设置为边框框，这样图像大小就不会改变，并且我在所有边上添加了 20px 的填充。然后我将背景设置为灰色，使图像周围的空间颜色正确:

img
{
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;

    background: #888;
}

JSFiddle