CSS triangle with background image [duplicate]

Answer 1

go on http://apps.eky.hk/css-triangle-generator/ and generate it :D

OR

#triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

Answer 2

If you don't care for cross browser compatibility, you can use a pseudo-element that you rotate by 45 degrees and attach the styles to it. The only thing you need additionally would be the background, rotated (back) by 45deg to attach to the pseudo element:

div.coolarrow:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -24.7px;
    left: 10px;
    background-color: #bada55;
    width: 50px;
    height: 50px;

    background: url(url/to/your/45deg/rotated/background.gif);

    box-shadow: inset 0 0 10px #000000;
    transform: rotate(45deg); 
}

Here's a short fiddle to illustrate (without background):
Fiddle

To work this out for other cases but 90degree arrows, you need to skew the rect additionaly. And I don't really know what then happens with the background image...

Answer 3

Put the image as a background for a div, and just put negative values for the margin to make it overlay on the bar. Example (although estimated, in no way do I claim this to work) would be margin-left: -20px; margin-top: -20px; and have it after the line.

Alternatively go with @Py's answer, and you can use this CSS for the arrow, and do the same negative margins to make it line up.

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; }