是否可以将 div 转换为这种形状然后用图像填充它？或者更好地将图像转换为该形状？都使用 CSS 或 Javascript。然后以这种方式
排列它们中的多个，我打算根据第二张图片将形状分组为几个环。至于图片，它将是动态的，所以不能真正预先剪切它们。
*编辑：我发现了我真正想要的效果。其实就是掩饰。在 webkit 中，这个 css 属性：-webkit-mask-box-image 效果很好（我也可以使用 .png 图像作为遮罩），但是当我尝试为 firefox 遮罩（使用 Illustrator 生成的 .svg 文件）时，它没有t 似乎工作。相同的 .svg 文件在 Chrome 中使用 -webkit-mask-box-image css 属性
对的，这是可能的。即使不使用任何 JavaScript 或浏览器特定属性。
我已经对其进行了测试，它适用于所有当前版本的 Chrome、IE、FF、Opera、Safari（在 Windows 7 上）。
这个想法是有多个带有不同角度切片的轮子（使用倾斜变换获得角度；切片也使用旋转变换进行旋转）。内轮覆盖外轮的中心部分。
我制作的版本非常简单，有两个轮子，内轮有 8 个图像（这意味着内轮的每个切片有 360°/8 = 45°），外轮有 12 个图像（=>外层的每一片都有 360°/12 = 30°）。
相关HTML：
<div class='picture-wheel'>
<div class='outer-wheel wheel'>
<div class='slice'><div class='bg'></div></div>
<!-- the rest of the slices, 11 more for this demo -->
<div class='inner-wheel wheel'>
<div class='slice'><div class='bg'></div></div>
<!-- the rest of the slices, 7 more for this demo -->
<div class='cover-wheel wheel'></div>
</div>
</div>
</div>
相关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 */
另一个略有不同的增强版本：
看看 CSS3 转换。您应该能够使用标准矩阵变换（类似于在 OpenGL 或 DirectX 中的方式）来完成。