Баг при использовании CSS-свойства transform

#css #transform

При использовании CSS-свойства transfrom наблюдается пробел между HTML-элементами.

Что это вообще за пробел и как его можно красиво убрать?

Фигура тут не имеет значение. Важно именно решение проблемы без JS Canvas.

http://jsfiddle.net/g2w6y7fm/1



.top-left {
  position: absolute;
  width: 140px;
  height: 120px;
  top: 45px;
  left: 50px;
  background-color: red;
  transform-origin: top right;
  transform: rotate(-30deg);
}
.right {
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-right: 70px solid transparent;
}
.left {
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 70px solid transparent;
}

  

  





    

Ответы

Ответ 1

К .top-left добавляем backface-visibility: hidden.



.top-left {
  backface-visibility: hidden;
  position: absolute;
  width: 140px;
  height: 120px;
  top: 45px;
  left: 50px;
  background-color: red;
  transform-origin: top right;
  transform: rotate(-30deg);
}
.right {
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-right: 70px solid transparent;
}
.left {
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 70px solid transparent;
}

  

  






http://jsfiddle.net/yw066stw/


Ответ 2

2 вариант - добавить translate3d( 0, 0, 1px);



.top-left {  
  position: absolute;
  width: 140px;
  height: 120px;
  top: 45px;
  left: 50px;
  background-color: red;
  transform-origin: top right;  
  transform: rotate(-30deg) translate3d( 0, 0, 1px);
}

.right {
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-right: 70px solid transparent;
}

.left {
  position: absolute;
  right: 100%;
  top: 0;
  width: 0;
  height: 0;
  border-top: 120px solid red;
  border-left: 70px solid transparent;
}