使用 CSS、Canvas 或 SVG 的三角形

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 引擎或其他东西，从而使边缘平滑