2

I made a page consisting of several sections with different background colors and a transparent background image with noise (transparent "PNG file"). At the top of each section I placed a triangular shaped div with the color of the section above. I would also like to add the noise image to the triangles but I can't figure out how.

I've tried the border-image attribute in "CSS" but that just erases the whole triangular shape for some reason..

I would be grateful if you could help me out. "This" is the site I'm working on.

user1118321
  • 25,567
  • 4
  • 55
  • 86
Floriskoch
  • 135
  • 1
  • 8

1 Answers1

1

You can use a rotated pseudo element :

Generic solution:

FIDDLE

HTML:

<div></div>

CSS:

div {
    width:200px;
    height:200px;
    overflow:hidden;
}
div:before {
    content:"";
    display:block;
    width:70%;
    height:70%;
    background-image: url(/*Path to your image*/);
    transform: rotate(-45deg);
    transform-origin:0 0;
    -ms-transform: rotate(-45deg);
    -ms-transform-origin:0 0;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin:0 0;
}

EDIT: Your use case

In your use case, you can consider just rotating .arrow-down by 45deg and set overflow:hidden; on the sections. (you also need to remove the existing borders on .arrow-down and give it desired dimensions)

Attila O.
  • 15,659
  • 11
  • 54
  • 84
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Thanks a lot! But I can't can quite get it to work yet. On each different triangle I've set a different background-color which should overlay the transparent background-image. But for some reason the color doesn't show or distorts the shape, depending on the CSS used. I've updated the [site](www.floriskoch.com) – Floriskoch May 11 '14 at 17:51
  • @user3626010 I just took a tour on your website, it looks like you managed to implement the solution I provided, good job. Could you set this question as answered by upvoting/accepting this answer if it helped? – web-tiki May 13 '14 at 08:29
  • Well yes it seems to work now, thanks a lot! However I still don't understand why I need to use two separate divs (arrow-down and section-ico). If I delete one, the whole thing dissappears. Also, I would very much like to upvote you but I seem to need more 'reputation'. – Floriskoch May 16 '14 at 18:22