6

I'm trying to put a background image on a div that is using CSS borders to create a triangle. This is my current efforts so far. It works fine with solid colours, but I am at a loss 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 that JS Fiddle, how would i make that gray section also an image background of my choice, rather than having to use colours such as #111, #eee, etc..

user2380171
  • 63
  • 1
  • 1
  • 4
  • Trying; but if you're already using image, why not make triangle images and transparent `div`s and put them at the corner? – Passerby May 14 '13 at 05:17
  • Because it's on a responsive layout. the width of the triangles is dependant on the size on the screen. Despite that, your idea still has merit - I could make them unusually long so that they'd be fine on all screen sizes. Thanks for the suggestion. – user2380171 May 14 '13 at 05:22
  • http://stackoverflow.com/questions/23758922/transparent-arrow-triangle – pathfinder Jul 10 '15 at 06:09

2 Answers2

10

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 an element itself, but a CSS border.

The border cannot be styled using the normal CSS background-image style, and this is where you start seeing the limitations of CSS triangles, and why it really is a hack rather than a good technique.

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

border-image is a CSS style that does what you'd expect; it puts an image into the border of an element. Since the CSS triangle is a border, you could use it to put a background image onto your triangle.

However, things do get complicated. The border-image style is designed to style borders, not triangles; it has features for styling corners and sides, and stretching images appropriately. I haven't tried it with a triangle, but I can predict that it may have some quirks that make it tricky to use. But feel free to give it a go.

The other problem with border-image is browser support. It's a relatively new CSS style, and is completely unsupported in many current browsers, including all versions of IE. You can see the full browser support table for it at CanIUse.

Because of all these issues, I would suggest that if you want to draw shapes in the browser, you really should consider dropping CSS hacks, and using SVG or Canvas. These are well supported in most browsers, and obviously support all the drawing features you could possibly want.

CSS triangles are great for making the occasional arrow shape, but for anything more complex than that it's a lot easier to use proper graphics rather than trying to pile more and more hacks into your CSS code.

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Setting as accepted answer, very concise. Thank you for the information, although the path I went eventually was to use a .PNG with transparency to emulate the effect. – user2380171 May 14 '13 at 07:53
-6

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

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

So your class .triangle would 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 your background image you should set the background-repeat. repeat-x makes the image repeat out to the left and right (x-axis) whilst 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'd recommend using a fixed height and width then.

RynoZ
  • 1
  • 3