2

I have a series of scaling triangles that I've arranged using flexbox, they get bigger and smaller depending on how the window is stretched. I want to have these overlay the bottom of an image to give it a sort of ripped paper or mountain peak sort of effect. The image that they will overlay scales to fit the window and the triangles must follow the image, scaling up and down with the window.

I'm having a lot of difficulty coming up with a solution to this problem and could use some help.

This is how I want the triangles and image to look and relate to one another, the triangles being black in this screenshot and the image being grey.

https://i.stack.imgur.com/1typu.png

Here's a jsfiddle link to the project: 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>

I want to avoid the effect of the triangles rising up or down or shifting along the sides of the window in relation to the image. I've been trying to get it to stay constantly running along the bottom and scaling appropriately but with no luck.

Thanks a bunch.

Jesse McLean
  • 23
  • 1
  • 5

2 Answers2

1

There is a bit to this, so I'll explain everything that I did in order.

1. Brown/Yellow bars' container

In order to get those two brown and yellow bars at the bottom, you need a container for them. Since there is black around them, I simply created a 100% x 40px div with a black background:

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

2. Create the brown and yellow bars

Since the brown and yellow bars are on the same line and are blocks, I created two inline-block elements with width 43% and one-side margins of 7%, as well as setting the proper background-color:

.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. Image border

Since you have that grey border around the image, I set the image box-sizing mode to border-box so that the image size would not change and I added 20px of padding to all of the sides. Then I set the background to grey to make the space around the image the right color:

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

    background: #888;
}

JSFiddle

Liftoff
  • 24,717
  • 13
  • 66
  • 119
  • Hey i was also trying to do the same what you did is far better – codefreaK Apr 10 '14 at 06:36
  • http://jsfiddle.net/wD2r2/5/ check this out earlier i used some other background pick now i borrowed you placedholder pic – codefreaK Apr 10 '14 at 06:39
  • @user3127499 Are you sure that's the right fiddle? I only see an image that is like 5px tall. – Liftoff Apr 10 '14 at 06:41
  • @user3127499 Ah that's better. You're on the right track. Just need a few adjustments. – Liftoff Apr 10 '14 at 06:50
  • What i noticed is that upon browser resizing your yellow and brown div remains intact whereas mine break into two and align one below another as width is hardcoded what i have facing how to write css with % – codefreaK Apr 10 '14 at 06:52
  • @user3127499 Writing with percentages is not that hard, as long as you make sure they total up to 100% in this case. (width: 43%)*(2 elements) = 86%. Margins: 7%*(2 elements) = 14%. 86 + 14 = 100%. – Liftoff Apr 10 '14 at 06:55
  • @David Not exactly what I'm looking for. When the window is resized, the triangles move up the image, leaving the bottom of it exposed. I want the triangles to stay fixed to the bottom of the image and not move up or down its container. – Jesse McLean Apr 10 '14 at 17:05
0

I made this 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>

First, you need to make your flexbox. Second, put the image (as a background image) into your flexbox child. Third, put your text to overlay on the image.

rollstuhlfahrer
  • 3,988
  • 9
  • 25
  • 38
mengru zhang
  • 379
  • 3
  • 9