CSS triangle with color and background-image

Question

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.

Answer 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)