ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: box-shadow で、まさに影分身。いくつもの DIV の形状を複製する
名前: lightbox
処理選択
パスワード

件名 box-shadow で、まさに影分身。いくつもの DIV の形状を複製する
名前 lightbox
コメント
@DIV
<style type="text/css">
#target1 {
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}

#target2 {
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			110px 0px 0px 0px  rgba(144,144,144,1)
			;

	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
#target3 {
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			110px 0px 0px -5px rgba(255,255,255,1),
			110px 0px 0px 0px  rgba(144,144,144,1)
			;

	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
</style>
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
@END

@HTML
<style type="text/css">
#target1 {
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}

#target2 {
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			110px 0px 0px 0px  rgba(144,144,144,1)
			;

	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
#target3 {
	margin: 0 0 0 50px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	border: solid 5px #909090;

	box-shadow:	
			110px 0px 0px -5px rgba(255,255,255,1),
			110px 0px 0px 0px  rgba(144,144,144,1)
			;

	-webkit-transform:skew(40deg);
	   -moz-transform:skew(40deg);
	    -ms-transform:skew(40deg);
	     -o-transform:skew(40deg);
	        transform:skew(40deg);
}
</style>
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
@HEND