-4

I'm searching for an elegant way to make non-horizontal section transition in my HTML (Bootstrap) page.

Here is what I mean

It should work on mobile and also with video- or parallax backgrounds.

Do you have any suggestions?

Tenzi
  • 3
  • 1

1 Answers1

0

I see two approaches avaiable:

  • It's a good idea to use plain PNG images, that you explicit set the height and where you wanna "crop" the block, but this approach make take longer to load, because you have to load all the PNGs images. Like this:<div style="height: 200px; overflow: auto; background-image: your-image.png"></div>
  • You can use CSS clip-path property combined with a polygon, which in fact is a little more difficult because you have to specify all the points in the polygon you wanna make. A hexagon example: clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); You can se more about clip-path here: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Finally I would choose the first approach. because is more scalable and easier to implement, in the future if you want to change the shape, just redraw it in some software of you choice, on the other hand with clip-path you would have to rethink all the points and where to put them.

Danilo Aleixo
  • 54
  • 7
  • Thank you for your approaches I think I will try the first one. How would the markup look with boostrap? Where would you put the backgroundimages (row)? `
    `     – Tenzi Jan 12 '18 at 12:49
  • I would put them inside the div with col, like this `
    `, of course it's a good practice to create a class for each styling you're using, so instead of having 'style=...", create a class and you that class
     – Danilo Aleixo Jan 13 '18 at 13:22