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.