Question

我有一系列使用flexbox排列的缩放三角形，它们会变得越来越小，具体取决于窗口的拉伸方式。我想让这些覆盖图像的底部给它一种撕纸或山峰的效果。它们将覆盖的图像按比例缩放以适合窗口，三角形必须跟随图像，随窗口一起向上和向下缩放。

我在解决这个问题方面遇到了很多困难，可以使用一些帮助。

这就是我希望三角形和图像看起来和相互关联的方式，此截图中的三角形为黑色，图像为灰色。

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>

我想避免三角形上升或下降或沿窗口侧面相对于图像移动的影响。我一直试图让它始终保持在底部运行并适当缩放，但没有运气。

非常感谢。

Answer 1

有一点对此，所以我将解释我按顺序做的所有事情。

1。棕色/黄色条纹＆＃39;容器

为了在底部获得这两个棕色和黄色条，你需要一个容器。由于它们周围有黑色，我只是创建了一个黑色背景的100％x 40px div：

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

2。创建棕色和黄色条

由于棕色和黄色条在同一条线上并且是块，我创建了两个内嵌块元素，宽度为43％，单边边距为7％，并设置了正确的背景颜色：

.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

Answer 2

我做了这个flexbox text overlaying on an image

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: url(https://raw.githubusercontent.com/212mr/608m02SamsungS8/master/image/1482233503439.jpg) no-repeat 0 0;
				background-size: cover;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				-o-background-size: cover;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

body {
  padding: 2em; 
}

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

首先，您需要制作Flexbox。其次，将图像（作为背景图像）放入flexbox子项中。第三，将文字叠加在图像上。

想要使用flexbox在图像上叠加div

2 个答案:

1。棕色/黄色条纹＆＃39;容器

2。创建棕色和黄色条

3。图像边框

JSFiddle