on:2011年12月26日sponsorsコンテンツ間の区切りやエレメントに斜めのラインを使ったスタイルを与えるスタイルシートのチュートリアルを紹介します。CSS3[ad#ad-2]下記は各ポイントを意訳したものです。IE9でご覧ください。1エレメント間のセパレートを対角線状にしたデモです。見出しの両端も斜めにデザインされています。2隣接したエレメントのセパレートを交互の矢印状にしたデモです。見出しの斜めのカット、背景のように斜めに配置されたテキストもスタイリッシュです。実装方法は、デモごとに紹介します。1実装のポイントコンテンツ自身は回転させず、コンテンツのラッパーを回転させます。回転させたコンテンツは表示領域からはみ出す部分もあるので、余剰分の処理も忘れずに。HTML見出しとテキストを含む個々のコンテンツはarticle要素で実装し、そのラッパーとしてdiv要素を設置しclassに「se-slope」を与えます。--></section>CSSまずは、ページの背景となるピンクを設定します。#e90089;}回転表示した際に余剰分が隠れるにします。150px;}各コンテンツのセパレートを対角線状にするために、ラッパー(.se-slope)を回転させます。ここでは5度回転させ、それを交互にプラスとマイナスにします。回転させた際には配置の調整も必要です。マイナスマージンで吊り上げて配置します。inset;}見出しの両端に三角の矢印を擬似要素で作成します。2実装のポイント矢印の形状を交互に組み合わせるには、透明なボーダーと擬似要素を使用します。HTMLHTMLは最初のデモとほとんど同じで、classの付け方がちょっと違うだけです。--></section>CSS背景をピンクにセットし、回転表示した際に余剰分が隠れるにします。#000;}個々のコンテンツを50%の幅にし、float:left;で二列に配置します。背景色は交互になるように、ピンクとブラックを指定します。#e90089;}ブラックのコンテンツに:after擬似要素を使用して、矢印の形状を与えます。数番目には左の矢印、奇数番目には右の矢印、になるようにします。0px;}擬似要素を使って、見出しの両端を斜めにカットします。-30px;}テキストは装飾用のエレメントとして斜めに配置し、サイズを大きくして半透明にします。