Gap between border-image after using transform: rotate

Question

I am trying to create a box with a jagged edge, that can actually be used as a HTML element should be, and can resize etc.

Finally got my head around border-image, got it looking nice, and then when I rotate it, it gets a gap between the border-image and the main fill:

I googled it, and found an answer on SO telling someone to set

-webkit-backface-visibility: hidden;

This cleared it up, but obviously only in webkit browsers.

I tried using -moz-backface-visibility as well, but it didn't clear the issue up in Firefox.

Any suggestions?

jsFiddle

e: I actually thought I may be able to fix it by setting a background color, and then setting the background-clip to padding-box, but honestly it just left me in the same position.

Answer 1

One trick that fixes the problem both in Webkit and FF is setting perspective (instead of backface visibility)

.box.one {
    -webkit-transform: perspective(999px) rotate(1deg);
    -moz-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    -o-transform: rotate(1deg);
    transform: perspective(999px) rotate(1deg);
}

fiddle

Answer 2

Adding an after pseudo class with negative margin seems to fix the Firefox issue.

.rough:after {
    content: "";
    display: block;
    margin: -1px;
    height: 302px;
    background: black;
}

Fiddle demo: http://jsfiddle.net/Wkk7W/3/

Note that the display:block seems to be an essential part of my hack/fix.

Update: Depending on your plans for content inside the div, that exact example might not suit. However, I think the concept could be tweaked depending on your requirements - e.g. using a 3px wide black border instead of a background fill, and using position:absolute to allow other text to be layered on top of the box.

Answer 3

Gonna answer myself, because this solution actually covers my needs of it being "as a html element should be, and can resize etc", even though I developed this solution from Grants answer.

http://jsfiddle.net/Wkk7W/6/

Set the element to position:absolute, then give it a pseudo element with:

content: "";
display: block;
position: absolute;
top: 0;
width: 102%;
margin: -1px 0 0 -1%;
height: 102%;
background: black;
z-index: -1;

This way it keeps the elements width and height, z-index: -1 to put it behind the text. It might not require the display:block, i didn't check.

There are still a few tiny gaps but they are basically impossible to cover and I am happy with it the way it is.