0

There are quite a few threads circulating about CSS triangles but none of them seem to address the layout I'm supposed to be working on.

I have a few sections where either there is a background of a full-bleed style image, or an offset image with text.

Obviously, if I could just use PNG's pre-cut to the width of the page that would be great but I don't think it would work here.

Rather than appending triangles the usual way with solid colors, I thought it may be possible to put a new spin on this whole gimmick, cutting out an "innie" triangle from the n+1 divs and then applying a negative margin to make it look like there was a triangle, when really there is just a cleft in each of the sections and an overlap.

Would that work? How else could one get this effect?

I mocked up a picture in Imgur.

css triangle layout

The layout is in bootstrap so any solution that takes that into account would be very helpful. Thanks for your help in saving "Gotham".

j08691
  • 204,283
  • 31
  • 260
  • 272
ml242
  • 109
  • 13
  • Before I get voted down so I can no longer, please see this diagram I just made further explaining it. The outcome of your link looks different but I would like to find an approach that more resembles this: http://i.imgur.com/FWeyzWQ.png The final result would look like a yellow div with a point, but in reality all of the work was on the gray div. – ml242 Feb 03 '15 at 14:12
  • I also wanted to add that the suggestion that Harry linked is quite interesting and I'm trying to see if the 'tooltip on top' example in number 4 may work for this. Suggestions 1+2 are not applicable, and #3 would take a lot of margin work and z-index to get this to work as well as a lot of manipulation of the png's in photoshop. – ml242 Feb 03 '15 at 16:45
  • 1
    Ok, If you look at the image in the question and compare it with the linked question, you would find that they are duplicates. The image in comment shows it is not a like for like duplicate but I would still say it is close enough because I feel you can still achieve that using the same methods mentioned in the linked answer. And finally, no the downvotes are not for a duplicate question but probably more because you haven't shown us any attempt/code. – Harry Feb 04 '15 at 04:49

0 Answers0