CSS triangle with background image

This question already has an answer here:

How do CSS triangles work? 18 answers

Creating a transparent arrow above image in CSS3 2 answers

---

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...

---

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; } 

---

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; 
}

链接地址: http://www.djcxy.com/p/89476.html

上一篇: 在右侧绘制三角形

下一篇: 与背景图像的CSS三角形