ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

CSSで平行四辺形

久しぶりの投稿です。

最近 WEBサイトで斜めになったメニューなどよく拝見しますね?

以前であれば、イラストレータで画像を作成していたかと思いますが、昨今はCSSで作成が可能です。

サンプル

ポイントは対象となる要素に、角度を付けること。

    -webkit-transform: skewX(-30deg);
	-moz-transform: skewX(-30deg);
	transform: skewX(-30deg);
その上に重なる文字列は角度を戻すこと。
親要素からはみ出した箇所は、overflow:hiddenで消すことです。
WEBデザインの幅が広がりますね!