Combine div border with image background - html

Question

I want to achieve something like this:
The width of the element is 100%. I will use only the centered corner and combine with border-top:
.element {
border-top: solid 1px #ccc ;
background: url('../images/arrow.png') no-repeat center top;
}
But the border stays inside the arrow. I tried up image background -1px to hide the border but it didn't work. How do I do this?

Answer 1

I solved it with an extra container:
HTML:
<div class="first"><div class="second"></div></div>​
CSS:
.first {
border-bottom: 5px solid #000;
width:100px;
height:100px;
background-size: 20%;
background-position:50% 105%;
box-sizing: border-box;
}
.second {
width:100%;
height:104px;
background: url(https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcROusF7rh7H4mWpr8wQIllxWPAHHIShRyG62xp3qy2O4Av_NmNV) no-repeat;
background-size: 20%;
background-position:50% 100%;
}
​
jsfiddle: http://jsfiddle.net/AKpLT/

Answer 2

Interesting issue. Here's one contrived solution using the :before selector to absolute position the image over the border. See this jsfiddle for a working example. The relevant code is as follows:
div {
border: 1px solid red; /* For demo purposes it's red */
position: relative;
}
div:before {
content: url('http://i.stack.imgur.com/P3zMs.png');
position: absolute;
top: -1px;
width: 100%;
text-align: center;
line-height: 1px;
}
Here's a screenshot of the result:
Edit: the browser compatability for the :before selector tells us it's only supported in IE8 and higher. It's even worse though, because as far as I can tell the content: url(...) construct nor the background-image of a :before pseudo-element doesn't seem to work even in IE9. Fortunately, this should fall under graceful degredation...

Answer 3

If you're already creating the image just make the entire thing your background image in the shape you want it. Make it long enough so it can adjust to whatever reasonable length element you might want to put it in.

Answer 4

Like Mash I'd use another element for the background, but unlike Mask I'd use the CSS :before or :after pseudo elements:
<h2>Heading</h2>
h2 {
border-top: 1px solid #ccc;
position: relative;
}
h2:after {
background: url(IMAGE);
content: " ";
display: block;
width: WIDTH-OF-IMAGE;
height: HEIGHT-OF-IMAGE;
position: absolute;
left: 50%;
top: -1px;
margin-left: -WIDTH-OF-IMAGE/2;
}