html - 使用 CSS、Canvas 或 SVG 的三 Angular 形

Question

这是目前的情况 http://jsfiddle.net/hmr4ca73/

<ul class="parts">
    <li class="part part__1 part__left">
        <div class="part_inner">
        <div class="part_shape">
            <div class="part_content" style="background-image: url(http://lorempixel.com/300/300);">
                <span>text 1</span>
            </div>
        </div>
        </div>
    </li>
    <li class="part part__2 part__left">
        <div class="part_inner">
        <div class="part_shape">
            <div class="part_content" style="background-image: url(http://lorempixel.com/300/301);">
                <span>text 2</span>
            </div>
        </div>
        </div>
    </li>
    <li class="part part__3 part__right">
        <div class="part_inner">
        <div class="part_shape">
            <div class="part_content" style="background-image: url(http://lorempixel.com/300/302);">
                <span>text 3</span>
            </div>
        </div>
        </div>
    </li>
    <li class="part part__4 part__left">
        <div class="part_inner">
        <div class="part_shape">
            <div class="part_content" style="background-image: url(http://lorempixel.com/300/303);">
                <span>text 4</span>
            </div>
        </div>
        </div>
    </li>
</ul>

1) 有 4 个 div，每个都是父级宽度的 25%

2) 这些 div 对高度和宽度都有响应

3) 当用户悬停在其中一个 div 上时，它的宽度变为 34%，其他变为 22%

4) 每个 div 内的图像使用 background-size: cover

填充父级的 100% 宽度和 100% 高度

问题是“边缘杂乱”http://grab.by/BibW

是否可以仅使用 CSS 进行修复？

感谢任何帮助。

将此代码传输到 SVG 或 Canvas 是双倍的感谢。

Answer 1

这是 Webkit 引擎的一个已知问题。

一个技巧是使用backface-visibility:

.part_shape {
    -webkit-backface-visibility: hidden;
}

旁注:
我在不知道为什么有效的情况下使用了这个技巧。我猜它会强制启用 3d 引擎或其他东西，这会产生平滑的边缘