Placing an image in a CSS triangle

Question

I am trying to put a background image in a div that uses CSS borders to create a triangle. These are my current efforts. It works great with solid colors, but I don't get it when it comes to images.

HTML

<div class="wrapper"> <div class="left triangle"></div> <div class="right triangle"></div> </div> 

CSS

 .wrapper { padding:50px 0px; height: 50px; position: relative; width: 300px; background: url("http://4.bp.blogspot.com/-dq50t26bK1o/TruhUtyIBWI/AAAAAAAANEw/kKnBQ1lSGik/s1600/bokeh_texture04.jpg"); } .triangle { border-bottom: 50px solid #eee; width: 50px; position: absolute; bottom: 0; } .right { right: 0; border-left: 100px solid transparent; } .left { left: 0; border-right: 100px solid transparent; } 

jsfiddle: http://jsfiddle.net/aRS5g/9/

So, looking at this JS script, how would I make the gray section also the figurative background of my choice, instead of using colors like # 111, #eee, etc.

Answer 1

A triangle in CSS is a hack created by displaying parts of the border of an element. Therefore, the triangle that you see is not the element itself, but the CSS border.

A border cannot be styled using the usual CSS background-image style, and it is here that you begin to see the limitations of CSS triangles and why this is really a hack and not a good technique.

There is a CSS solution that might work for you: border-image .

border-image is a CSS style that does what you expect; it puts the image on the border of the element. Since the CSS triangle is a border, you can use it to place a background image on your triangle.

However, things get complicated. The border-image style is for border styles, not triangles; It has functions for laying corners and sides, as well as stretching images accordingly. I have not tried it with a triangle, but I can predict that it may have some quirks that make it difficult to use. But feel free to let him go.

Another problem with border-image is browser support. This is a relatively new CSS style and is not fully supported in many modern browsers, including all versions of IE. You can see the full browser support table for it CanIUse .

Because of all these issues, I would suggest that if you want to draw shapes in a browser, you really should consider removing CSS hackers and using SVG or Canvas. They are well supported in most browsers and obviously support all of the drawing features you might want.

CSS triangles are great for creating a random arrow shape, but for something more complex than that, it's much easier to use the right graphics, rather than trying to put more and more hacks into your CSS code.

Answer 2

To give a div a background image you must add a css rule

 background-image:url("your image url here"); 

So your .triangle class will look like this:

 .triangle { background-image:url("your url here"); background-repeat:no-repeat; border-bottom: 50px solid #eee; width: 50px; position: absolute; bottom: 0; } 

Also, depending on the background image, you should set the background repeat. repeat-x causes the image to repeat left and right (along the x axis), and repeat-y repeats your image up and down (y axis). If you do not want to repeat the image, just use no-repeat, but I would recommend using a fixed height and width.