6

I created a triangle with this css:

.arrow-left {
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
position: relative;
left: -7px;
top: -32px;
z-index: 1;
border-right: 200px solid #CC888A;
}

But when I added the transform to it:

.arrow-left {
width: 0px;
height: 0px;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
transform: rotate(45deg);
position: relative;
left: -7px;
top: -32px;
z-index: 1;
border-right: 200px solid #CC888A;
}

a strange dotted line appears down the center of the triangle. It appears fine in Chrome, I know Firefox shows it though.

Here's the example: http://codepen.io/aaronlbrink/pen/zLFEJ

UPDATE This works: http://codepen.io/aaronlbrink/pen/qHbCG

aaronb
  • 162
  • 3
  • 12
  • 1
    possible duplicate of [Anti-aliasing on rotated div with border image in firefox](http://stackoverflow.com/questions/20406355/anti-aliasing-on-rotated-div-with-border-image-in-firefox) – Hashem Qolami Feb 18 '14 at 23:23
  • Just for the info, you can do the same arrow without a transform. Except you may want to animate it. – xpy Feb 18 '14 at 23:24
  • @HashemQolami funny that `translateZ` adds another pink line (to me at least) – xpy Feb 18 '14 at 23:25
  • 1
    you can probably get rid of the artifact by dropping the border-bottom line, rotating by a different angle and adjusting the left + top offset. – Jonas Berlin Feb 19 '14 at 16:09

1 Answers1

2

You can try without css3 rotate function :

width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #007bff transparent;

More on : http://apps.eky.hk/css-triangle-generator/

antoinestv
  • 3,286
  • 2
  • 23
  • 39