4

I came across with some CSS bug when added border-image and then rotated it. After rotation on border image, we could see additional lines, how could I remove it. Without rotation all look good.

height: 96px;
width: 260px;
vertical-align: middle;
display: table;
border: 26px solid transparent;
margin: 0 auto;
-webkit-border-image: url(/wp-content/uploads/2016/08/border.jpg) 48 stretch;
border-image: url(/wp-content/uploads/2016/08/border.jpg) 48 stretch;
-webkit-transition: all ease-in .3s;
transition: all ease-in .3s;
background-color: #cad584;
-webkit-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
position: relative;

It is the result enter image description here

Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
Maksim B.
  • 95
  • 2
  • 9
  • 4
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) ideally with the actual image. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Aug 26 '16 at 11:27
  • Also you refer to `translate` in your text but `rotate` in your code. – Paulie_D Aug 26 '16 at 11:28
  • It's not a bug, it's the way that CSS items get rotated. It's to do with anti-aliasing. Best way, is to save the image in it's rotated state. – Lee Aug 26 '16 at 11:32
  • 1
    Some ideas in this thread you can try.. http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome – Hastig Zusammenstellen Aug 26 '16 at 13:44

2 Answers2

2

As the commenters have mentioned, you're seeing anti-aliasing on the edges of the jpeg, which has a solid background colour.

Instead, use a PNG with alpha transparency, that way there is no visible edge to anti-alias.

You'll need to find some way to stop your background colour showing through the border - in the example below I've simply wrapped it with an outer div that gets the border image. There are probably more elegant solutions!

HTML:

<div class="outer">
    <div class="inner">Work for Us</div>
</div>

CSS:

border-image: url(/wp-content/uploads/2016/08/border-with-alpha.png) 48 stretch;

JS Fiddle here: https://jsfiddle.net/ktxcs2c8/1/

Forgive my terrible border image, and huge data URL!

beercohol
  • 2,577
  • 13
  • 26
0

Try transform: rotate(-2deg); translateZ(1px);

Leave translateZ(1px) the same even though you are varying the degrees rotated.

transform: rotate(-10deg); translateZ(1px);
transform: rotate(-4deg); translateZ(1px);
transform: rotate(6deg); translateZ(1px);
Hastig Zusammenstellen
  • 4,286
  • 3
  • 32
  • 45