5

При использовании 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;
}
<div class="top-left">
  <div class="left"></div>
  <div class="right"></div>
</div>

5
  • 1
    у .left и .right поставь 99% left и right соответственно, и линии пропадут
    – Maximmka
    4 авг 2016 в 10:26
  • Да, но будет некрасивый выступ в 1px.
    – V.Manokhin
    4 авг 2016 в 10:30
  • тогда попробуй поставь 99.5%)
    – Maximmka
    4 авг 2016 в 10:35
  • Перенеси код в вопрос.
    – Qwertiy
    4 авг 2016 в 11:07
  • Пришла идея использовать box-shadow,.. но при его применении к блокам .left и .right также вылетает побочный эффект: jsfiddle.net/v2soxs7y; и при применении к .top-left вроде бы те же выступы, что и при установке left и right в 100%: jsfiddle.net/pyn34112. 4 авг 2016 в 16:49

2 ответа 2

2

К .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;
}
<div class="top-left">
  <div class="left"></div>
  <div class="right"></div>
</div>

http://jsfiddle.net/yw066stw/

1
  • В хроме всё хорошо, но в mozille по прежнему остались пробелы
    – V.Manokhin
    4 авг 2016 в 21:05
1

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;
}
<div class="top-left">
  <div class="left"></div>
  <div class="right"></div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.