CSS 旋转的 div 边框显示奇怪的轮廓

Question

I'm trying rotate a div with a border. The border has the same color as the background. A very thin line appears between the border outline and the background. Here is my code below. I'm trying to get rid of the weird line.

 body { background-color: black; } div { width: 50px; height: 50px; background-color: white; border: 50px solid black; transform: rotate(45deg); }

 <div></div>

I tried multiple browsers.

I could fix this by using another div instead of a border, but I'm more interested in getting the border to work as expected.

Answer 1

A simple fix of this is by using backface-visibility: hidden .

When an element rotates, it seems that the rendering of transform: rotate() may cause the back face of it to be shown, as if in 3D perspective.

This possibly lead to the background-color of the back face (a mirror image the element's front face) overflowing the border edge in this case.

backface-visibility: hidden fix it by rendering the back face invisible, as shown in below example.

On side note, MDN did mention that backface-visibility has no effect on 2D transforms, which indicates that this behavior of transform: rotate() to have perspective is more accidental than expected.

Example:

 body { background-color: black; display: flex; gap: 100px; } div { width: 50px; height: 50px; background-color: white; border: 50px solid black; transform: rotate(45deg); } div + div { /* fixed here */ backface-visibility: hidden; }

 <div></div> <div></div>

Answer 2

That's an interesting one as it only appears with the rotate transformation. You can remove it using outline to paint over the thin line with a border which will also not affect the positioning of it as follows:

 body { background-color: black; } div { width: 50px; height: 50px; background-color: white; border: 50px solid black; transform: rotate(45deg); outline-offset:-1px; outline: 2px solid black; }

 <div></div>

Answer 3

Firefox only

My best guess is that there are rounding issues with the 3D rotation on the Z-axis in browser graphics functions. Rotation on the X-axis and Y-axis show no issues. It seems the size of the element drawn is rounded down (smaller), while the browser calculates with the actual or rounded up values. The difference will be a narrow gap where the element background-color is able to bleed through. I used red in the snippet to show this.

Both transform: rotate(..) and transform: rotateZ(..) show the same issue when rotation is other than 0deg (usually the purpose of rotation).

To resolve the issue (Firefox only!!) use transform-style: preserve-3d with the element being rotated.

 body { background-color: black; padding: 3rem; } div { width: 50px; height: 50px; background-color: red; border: 50px solid black; transform: rotate(45deg); }.test { transform-style: preserve-3d; /* voila. background colored border is gone..: */ margin-top; 4rem; /* create some distance */ }

 <div></div> <div class="test"></div>

Answer 4

try like below, no need border, just simply use margin.

 body { background-color: black; } div{ width: 50px; height: 50px; background-color: white; transform: rotate(45deg); border: 0px; /* border: 50px solid black; */ margin: 50px; }

 <div></div>

Answer 5

 body { background-color: black; } div { width: 50px; height: 50px; background-color: white; transform: rotate(45deg); border: 0px; /* border: 50px solid black; */ margin: 50px; }

 <div></div>