是否可以將div轉換爲此kind of shape，然後用圖像填充它？或者更好地將圖像轉換成該形狀？都使用CSS或Javascript。然後在這manner

排列它們中的多個我打算根據第二張圖將這些形狀分組爲幾個環。至於圖片，它將是動態的，所以不能真正預先剪切它們。使用css/javascript進行圖像遮罩

*編輯：我發現了我真正想要的效果。它實際上是掩蓋的。在webkit中，這個css屬性：-webkit-mask-box-image效果很好（我也可以使用.png圖像作爲掩碼），但是當我嘗試屏蔽firefox（使用Illustrator生成的.svg文件）時， t似乎工作。同樣.svg文件使用-webkit-面具盒圖像CSS屬性的作品在Chrome

2012-09-26 Mohd Farhan

是的，這是可能的。即使沒有使用任何JavaScript或瀏覽器的特定屬性。

demo

我測試過它，它適用於Chrome，IE，FF，歌劇，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 */

另一種略有不同的加強版：