画像を多角形に切り抜いてみた！ただし、CSS駆使してない

丸とか四角とかで切り抜くのはCSSで結構簡単にできるけど、多角形ってどうやってやるんだ…と調べたらSVGとか使わないとできないみたい。

なんかめんどくさかったので、この程度で事足りるし！という程度のものを作りました。

サンプルページ

どうなってるの

こんな画像を用意。

切り抜きたい画像の上に、上のマスク用画像をかぶせるだけです！

HTML

<div class="hexagon">
    <img src="images/mask.png" alt="" width="302" height="262" class="mask" />
    <img src="images/sky01.jpg" alt="お空" width="" height=""  class="sky" />
</div>

CSS

.hexagon {
	display:block;
	width:302px;
	height:262px;
	position:relative;
}
.hexagon img {
	position:absolute;
	top:0;
	left:0;
}
.hexagon img.mask {
	z-index:100;
}
.hexagon img.sky {
	max-width:300px;
	min-height:260px;
}

サイトの背景が一定じゃない場合は、使えないのが難点。