最近はCSS3を利用してインタラクティブなコンテンツ表現を行うサイトが出てきました。
SwapSkillsのサイトをリニューアルしましたが、詳細ページの部分でCSS3を利用した二等辺三角形をつかってみましたので、簡単にご紹介します。
書き方は主に2つあります。1つはborderプロバティを使ったもの、もうひとつはCSS3のtransformプロバティを使ったものです。
borderプロバティを使ったものは、簡単に作れます。
幅や高さを消してborderのサイズと色を変化させると簡単に三角形ができます。
border-widthの幅を上辺は25px、左右は50px、下辺は5pxに指定し、border-topに赤色を指定し、その他の色を透明にしました。
これで三角形の出来上がりです。
borderプロバティを使ったものは古いブラウザでも対応できそうです。ただ、アンチエイリアスが効かないためにジャギーが発生してギザギザが目立ちます。
 |
| borderプロバティを使った三角形（上）は transformプロバティを使った三角形（下）と比べてジャギーが目立つ |
.triangle01 {
width: 0;
height: 0;
margin-left:200px;
margin-bottom:50px;
}
CSS3のtransformプロバティを使ったものは、borderプロバティを使ったものよりも難しいです。
「子要素が親要素の余計な部分を隠して三角形をつくる」というものになります。
親になる要素と子になる要素2つが必要です。子になる要素は、::before疑似要素・::after疑似要素を使うのがいいでしょう。
はじめに、子要素には、幅と高さが同じ大きさになるように指定します。
次に、2つ用意した子要素をCSS3のtransform:skewで変形させ、平行四辺形を2つ作ります。
 |
| CSS3のtransform:skewで変形させた平行四辺形 |
transform:skewの数値がポイントで同じ数値のプラスマイナスの値を指定します。
1つはtransform:skew(75deg)のように正の値、もうひとつはtransform:skew(-75deg)のように負の値にして回転させます。
変形させた2つの子要素は、同じ形の平行四辺形を反転させたものになります。
2つ用意した子要素の位置を、三角形の頂点が合うように調整します。
親要素の下部に平行四辺形で"X"を作る形になります。
 |
| 親要素の下部に平行四辺形で"X"を作る |
最後に親要素に「overflow:hidden」を指定します。これで子要素が親要素からはみ出た部分を隠せます。
 |
| 完成形。緑のコンテンツ部分がオレンジの部分で隠されて三角形になる。 |
サンプルソース
.triangle02{
position:relative;
overflow:hidden;
width:150px;
height:20px;/* 高さをかえれば五角形に */
margin-left:200px;
background:green;
color:#333;
}
.triangle02:before,
.triangle02:after{
position:absolute;
bottom:-0px;
content:"";
z-index:0;
width:100px;
height:100px;
background:orange;
transform-origin:0 0;
}
.triangle02:before{
left:-210px;
-webkit-transform:skew(75deg);
-moz-transform:skew(75deg);
-o-transform:skew(75deg);
-ms-transform:skew(75deg);
transform:skew(75deg);
}
.triangle02:after{
right:-210px;
-webkit-transform:skew(-75deg);
-moz-transform:skew(-75deg);
-o-transform:skew(-75deg);
-ms-transform:skew(-75deg);
transform:skew(-75deg);
}
0 件のコメント:
コメントを投稿