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

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

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

img_hexagon

サンプルページ

どうなってるの

こんな画像を用意。

mask

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

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;
}

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA