При использовании 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>
box-shadow
,.. но при его применении к блокам.left
и.right
также вылетает побочный эффект: jsfiddle.net/v2soxs7y; и при применении к.top-left
вроде бы те же выступы, что и при установкеleft
иright
в 100%: jsfiddle.net/pyn34112.