有機會將圖像放置在六邊形內嗎？我已經習慣了html中的六邊形形狀的單元格，但無法將其填充（背景圖像）。這是我嘗試過的：.top {  height: 0;  width: 0;  display: block;  border: 20px solid red;  border-top-color: transparent;  border-right-color: transparent;  border-bottom-color: red;  border-left-color: transparent;}.middle {  height: 20px;  background: red;  width: 40px;  display: block;}.bottom {  height: 0;  width: 0;  display: block;  border: 20px solid red;  border-top-color: red;  border-right-color: transparent;  border-bottom-color: transparent;  border-left-color: transparent;}<div class="hexagon pic">  <span class="top" style="background: url(http://placekitten.com/400/400/)"></span>  <span class="middle" style="background: url(http://placekitten.com/400/400/)"></span>  <span class="bottom" style="background: url(http://placekitten.com/400/400/)"></span></div><div class="hexagon">  <span class="top" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>  <span class="middle" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span>  <span class="bottom" style="overflow: hidden;"><img src="http://placekitten.com/400/400/" /></span></div><div class="hexagon">  <span class="top"><img src="http://placekitten.com/400/400/" /></span>  <span class="middle"><img src="http://placekitten.com/400/400/" /></span>  <span class="bottom"><img src="http://placekitten.com/400/400/" /></span></div>這是一個小提琴：http : //jsfiddle.net/jnz31/kGSCA/