「Clip-path」を使いこなす
斜めのラインを実装するには様々な方法がありますが、今回使うプロパティは「Clip-path」です。
「Clip-path」とは？
要素自体を斜めにするのではなく、頂点の位置をX軸、Y軸の値で指定してその形でくりぬく方法です。指定した範囲のものが表示され、外側になったコンテンツ内容は非表示になります。
多角形で切り抜く場合は「polygon()」のカッコ内にカンマで区切って各頂点の座標を「X,Y」の順に指定します。
→clip-path:polygon(頂点１のX軸 頂点１のY軸,頂点２のX軸 頂点２のY軸,・・・);
頂点が描かれる方向は時計回りとなります。
Safariなどの他のブラウザに対応させるために「-webkit-」のペンダ―プレフィックスのついたコードも一緒に記述していきます。
.square{
-webkit-clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
background-color:red;
height:120px;
width:50%;
}斜めブロックを台形でつくってみます。
.trapezoid{
-webkit-clip-path:polygon(0 0,100% 10%,100% 90%,0 100%);
clip-path:polygon(0 0,100% 10%,100% 90%,0 100%);
background-color:green;
height:200px;
}要素の下部を円形に切り抜く
楕円を描きたいときは「ellipse」を使います。
円形の場合は頂点はないので、縦横の半径と中心点の位置を指定します。
円の大きさは直径ではなく半径になるので注意！しましょう。
ellipse(横の半径 縦の半径 at 中心点のX軸の座標 中心点のY軸の座標);
要素の下部だけ丸みを出すには半径の値をそれぞれ50%より大きい数値に設定して、親要素から円がはみ出す形で表現します。
円の一部のみを表示させる
正円はcircle()を使って半径や中心点の位置を指定します。
circle(半径 at 中心点のX軸の座標 中心点のY軸の座標);
パスの座標を手軽に取得
clip-pathはとても便利ですがやはり、座標の指定が面倒です。
「Clippy」というウェブサイトではあらかじめたくさんの多様な図形が用意されており、ワンクリックでベースとなる形が表示され好みの形にドラッグで頂点を動かすことで簡単に座標を取得することができます。
No responses yet