skuare.net

画像にマスクをかける際にはPhotoshopなどで加工をしなければなりません。
JavaScriptライブラリのMaskewを利用すれば、簡単に歪んだ感じのマスクを掛けられるようになり、画像を一風変わった形で表示できます。

使用方法 Maskewからファイルをダウンロード。
jQueryを使用するとエレメントの指定が楽なので、こちらも読み込みます。 <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="maskew.js"></script>
<script type="text/javascript">
$(function() {
var $maskew = $('#id名').maskew(15); //数字は角度
});
</script>
次に表示させたい場所に上記のidを記述。
<p id="id名"></p>
最後にマスク対象の画像をCSS側に書きます。
#id名{
width: 245px;
height: 245px;
background:url(画像パス);
}
画像とCSSの高さ・幅を一緒にしても構いませんし、下記サンプルのように画像を繰り返しても面白くなりそうです。

画像に歪んだ形のマスクをかけられるJavaScript「MASKEW」サンプル