demo 的

Question

是否可以将div转换为此kind of shape然后用图像填充？或者更好地将图像转换为该形状？使用CSS或Javascript。然后在此manner中排列多个

我打算按照第二张图片将形状分成几个环。至于图片，它将是动态的，所以无法真正预先剪切它们。

*编辑：我发现了我真正想要的效果。它实际上是掩盖。在webkit中，这个css属性：-webkit-mask-box-image运行良好（我也可以使用.png图像作为掩码），但是当我尝试使用forfox进行屏蔽时（使用Illustrator生成的.svg文件），它没有'似乎工作。相同的.svg文件在Chrome中使用-webkit-mask-box-image css属性

Answer 1

是的，有可能。即使不使用任何JavaScript或浏览器特定的属性。

demo 的

我测试了它，适用于所有当前版本的Chrome，IE，FF，Opera，Safari（在Windows 7上）。

这个想法是让多个轮子具有不同角度的切片（使用倾斜变换获得角度;切片也使用旋转变换旋转）。内轮覆盖外轮的中心部分。

我制作的版本非常简单，有两个轮子，内轮有8个图像（这意味着内轮的每个切片都有360°/ 8 = 45°）和12个外轮图像（=＆gt;外层的每个切片都有360°/ 12 = 30°）。

相关的 CSS ：

.wheel {
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    box-shadow: 0 0 1em;
}
.picture-wheel {
    width: 30em; height: 30em;
    margin: 3em auto 0;
}
.slices-wrapper { 
    position: absolute;
    width: 100%; height: 100%;
}
.slice {
    overflow: hidden;
    position: absolute;
    bottom: 50%; right: 50%;
    transform-origin: 100% 100%;
}
.outer { width: 30em; height: 30em; }
.inner-wheel {
    transform: rotate(7.5deg);
    width: 21em; height: 21em;
    margin: 4.5em;
}
.cover-wheel {
    width: 12em; height: 12em;
    margin: 4.5em;
    box-shadow: inset 0 0 1em;
    background: white;
}
.bg {
    border-radius: 50%;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 8em 6em;
}
.outer-wheel > .slice {
    width: 15em; height: 15em;
    transform: skewY(60deg);
}
.outer-wheel > .slice:nth-child(2) { transform: rotate(30deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(3) { transform: rotate(60deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(4) { transform: rotate(90deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(5) { transform: rotate(120deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(6) { transform: rotate(150deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(7) { transform: rotate(180deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(8) { transform: rotate(-150deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(9) { transform: rotate(-120deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(10) { transform: rotate(-90deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(11) { transform: rotate(-60deg) skewY(60deg); }
.outer-wheel > .slice:nth-child(12) { transform: rotate(-30deg) skewY(60deg); }
.outer-wheel > .slice .bg {
    width: 30em; height: 30em;
    transform: skewY(-60deg) rotate(-15deg);
}
.outer-wheel > .slice .bg {
    background-image:
        url(image-for-first-slice-outer.jpg);
}
.outer-wheel > .slice:nth-child(2) .bg {
    background-image:
        url(image-for-second-slice-outer.jpg);
}
/* background images for the other slices of the outer wheel */
.inner-wheel > .slice {
    width: 10.5em; height: 10.5em;
    transform: skewY(45deg);
}
.inner-wheel > .slice:nth-child(2) { transform: rotate(45deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(3) { transform: rotate(90deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(4) { transform: rotate(135deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(5) { transform: rotate(180deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(6) { transform: rotate(-135deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(7) { transform: rotate(-90deg) skewY(45deg); }
.inner-wheel > .slice:nth-child(8) { transform: rotate(-45deg) skewY(45deg); }
.inner-wheel > .slice .bg {
    width: 21em; height: 21em;
    transform: skewY(-45deg) rotate(-22.25deg);
}
.inner-wheel > .slice .bg {
    background-image:
        url(image-for-first-slice-inner.jpg);
}
.inner-wheel > .slice:nth-child(2) .bg {
    background-image:
        url(image-for-second-slice-inner.jpg);
}
/* background images for the other slices of the inner wheel */

另一个略有不同的增强版本：

demo 的

Answer 2

可以尝试使用Canvas元素并绘制

http://jsfiddle.net/m6QgV/6/

这是一个例子

Answer 3

看看CSS3转换。您应该能够使用标准矩阵转换（类似于OpenGL或DirectX中的方式）。

使用css / javascript进行图像屏蔽

3 个答案:

demo 的

demo 的