Round

Bevel

Notch

Bite

Cool

Sharp

Slide

Jut

Curl

Tear

Fray

Wicked

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.corner.js"></script>
<script>
	$(window).load(function(){
		$('#CornerDemo01').corner();
		$('#CornerDemo02').corner('bevel');
		$('#CornerDemo03').corner('notch');
		$('#CornerDemo04').corner('bite');
		$('#CornerDemo05').corner('cool');
		$('#CornerDemo06').corner('sharp');
		$('#CornerDemo07').corner('slide');
		$('#CornerDemo08').corner('jut');
		$('#CornerDemo09').corner('curl');
		$('#CornerDemo10').corner('tear');
		$('#CornerDemo11').corner('fray');
		$('#CornerDemo12').corner('wicked');
		$('.demo-area').css('opacity', 1);
	});
</script>
<div class="Corner-demo" id="CornerDemo01"><p>Round</p></div>
<div class="Corner-demo" id="CornerDemo02"><p>Bevel</p></div>
<div class="Corner-demo" id="CornerDemo03"><p>Notch</p></div>
<div class="Corner-demo" id="CornerDemo04"><p>Bite</p></div>
<div class="Corner-demo" id="CornerDemo05"><p>Cool</p></div>
<div class="Corner-demo" id="CornerDemo06"><p>Sharp</p></div>
<div class="Corner-demo" id="CornerDemo07"><p>Slide</p></div>
<div class="Corner-demo" id="CornerDemo08"><p>Jut</p></div>
<div class="Corner-demo" id="CornerDemo09"><p>Curl</p></div>
<div class="Corner-demo" id="CornerDemo10"><p>Tear</p></div>
<div class="Corner-demo" id="CornerDemo11"><p>Fray</p></div>
<div class="Corner-demo" id="CornerDemo12"><p>Wicked</p></div>

Cornerについて

Cournerは、css3が使えないIE6,7,8でもborder-radiusを表現することができるプラグインです。
角のパターンは豊富なバリエーションが用意されています。
ただし、デフォルトではカド部分が白背景になっているので、白背景以外の部分で使うと変になります。
そこで、オプション設定で角の背景色を背景色と合わせることで違和感をなくすことができます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT or GPL
対応ブラウザ

関連するjQueryプラグイン

  • jQuery-Shadow

    jQuery-Shadow

    色々なパターンのシャドウを表現できる