Симметричный шестиугольный блок

веб, геометрия

В одной из недавних работ нам пришлось использовать шестиугольный блок с картинкой. В общем случае делается он так:

<style>
    .out, .in {
        display: inline-block;
        overflow: hidden;
    }
</style>
<body>
    <div class="out" style="transform: skew(α)">
        <div class="in" style="transform: skew(β)">
            <img src="picture.png" alt="Board" style="transform: skew(γ)">
        </div>
    </div>

где α, β и γ — углы, на которые проводится скос элементов.

Суть метода: картинка помещается в пару контейнеров, затем и картинка, и контейнеры подвергаются перекосу, при котором пропадают углы, вышедшие за границы родительского элемента. При перекосе самой картинки отрезаются два противоположных угла, при перекосе элемента с классом in в другую сторону и с большей амплитудой — оставшиеся углы, после чего перекосом элемента с классом out картинка возвращается к нормальному положению.

Для углов α = 20° (20deg в CSS), β = −30°, γ = 40° и картинки, состоящей из квадратов результат будет таким:

Можно заметить, что для возвращения картинки к нормальному положению углы α и γ должны совпадать. Угол β больше, чем α, но не в два раза — меньше. Для того, чтобы углы картинки обрезались симметрично, надо, чтобы тангенсы углов α и β относились как 1 к −2.

Можно CSS-правило трансформации записать в виде матрицы, где указывается тангенс: transform: matrix(1, 0, тангенс, 1, 0, 0) — тогда вместо вычисления углов путём взятия арктангенса, который есть, например, в дополнительных пакетах к Sass, но не в нём самом (и уж тем более не в CSS), можно будет пользоваться простым умножением:

$tan: .5;

.out, .in {
    display: inline-block;
    overflow: hidden;
}

.out, .in img {
    transform: matrix(1, 0, $tan, 1, 0, 0);
}

.in {
    transform: matrix(1, 0, -2*$tan, 1, 0, 0);
}

Результат — группа из стоя́щих друг на друге квадратов режется по диагонали:

Для $tan: .577350269 (tg 30°) углы будут кратны тридцати градусам:

Треугольники

В обоих случаях Google Chrome режет неидеально: углы правильные, но некоторые линии разреза параллельно перенесены на несколько точек. Firefox рисует аналогично. Хотя если не заниматься пиксельхантингом рассматривать придирчиво каждую точку, результат выходит вполне приемлемым.

Дополнение/: если наружному элементу .out задать нулевую высоту строки line-height: 0, то линии разреза переноситься не будут ни в Хроме, ни в Файрфоксе — станет как надо.