Webデザインでは、不規則な形状の要素が常に重要です。 矢印の形をした対角線は、興味深い視覚的な流れを作り出し、快適な結果をもたらします。 不規則なフォームを使用するプロジェクトに触発されたので、それらを使用したいくつかの簡単な例を示したいと思います。
最初の例
最初の例では、1つの機能を持つ通常のレイアウトを作成します。ブロックは水平線ではなく、垂直線で分割されます。 これを行うには、コンテンツでブロックをオンにします。 コンテンツをブロックとともに回転させたくないので、単に反対方向に回転させます。
マークアップ
すべてのコンテンツのセクションを作成してみましょう。その中にse-slopeクラスのブロックを配置し、その中にテキストを入れます：
<section class="se-container"> <div class="se-slope"> <article class="se-content"> <h3>Some headline</h3> <p>Some text</p> </article> </div> <div class="se-slope"> <!-- ... --> </div> <!-- ... --> </section>
それでは、スタイルに取りかかりましょう。
スタイル
Webページの背景色は、se-slopeクラスのブロックと同じです。 これにより、回転したブロックの不均一なエッジが非表示になります。
body{ background: #e90089; }
回転したブロックが反映されるように、se-containerクラスを使用して、overflow：hiddenプロパティをブロックに適用します。
.se-container{ display: block; width: 100%; overflow: hidden; padding-top: 150px; }
奇数ブロックを黒にして5度回転させ、偶数ブロックをピンクにしてすでに-5度回転させましょう。 上に負のマージンを追加して、奇数要素の位置を修正します。
.se-slope{ margin: 0 -50px; transform-origin: left center; } .se-slope:nth-child(odd){ background: #000; transform: rotate(5deg); margin-top: -200px; box-shadow: 0px -1px 3px rgba(0,0,0,0.4); } .se-slope:nth-child(even){ background: #e90089; transform: rotate(-5deg); box-shadow: 0px 2px 3px rgba(0,0,0,0.4) inset; }
コンテンツを中心にしましょう：
.se-content{ margin: 0 auto; }
見出しを作りましょう。 これを行うには、疑似要素の前と後を使用して、矢印の形の辺を作成します。
.se-content h3{ font-size: 60px; position: relative; display: inline-block; padding: 10px 30px 8px 30px; height: 80px; line-height: 80px; margin-bottom: 20px; font-family: 'Bitter', 'Trebuchet MS', Arial; text-shadow: 1px 1px 1px rgba(0,0,0,0.9); } .se-slope:nth-child(odd) .se-content h3{ background: #e90089; color: #000; } .se-slope:nth-child(even) .se-content h3{ background: #000; color: #e90089; } .se-content h3:before{ content: ''; width: 0; height: 0; border-top: 38px solid transparent; border-bottom: 60px solid transparent; border-right: 60px solid black; position: absolute; left: -59px; top: 0px; } .se-content h3:after{ content: ''; width: 0; height: 0; border-top: 38px solid transparent; border-bottom: 60px solid transparent; border-left: 60px solid black; position: absolute; right: -59px; top: 0px; }
奇数要素の色を設定します。
.se-slope:nth-child(odd) .se-content h3:before, .se-slope:nth-child(odd) .se-content h3:after{ border-right-color: #e90089; border-left-color: #e90089; }
段落のスタイルを定義します。
.se-content p{ width: 75%; max-width: 500px; margin: 0 auto; font-style: italic; font-size: 18px; line-height: 24px; padding-top: 10px; }
段落が始まる文字のスタイルを定義します。
.se-content p:first-letter{ font-size: 40px; font-family: 'Adobe Garamond Pro', Georgia, serif; }
コンテンツを水平になるように回転させ、インデントを調整します。
.se-slope:nth-child(odd) .se-content{ transform: rotate(-5deg); color: #e90089; padding: 130px 100px 250px 100px; } .se-slope:nth-child(even) .se-content{ transform: rotate(5deg); color: #000; padding: 150px 100px 250px 100px; }
最初の例のデモンストレーション
これが最初の例です。 2番目を検討してください。
2番目の例
2番目の例では、透明な境界線と擬似要素を使用して、矢印の形を作成します。
マークアップ
最初の例と同じマークアップを使用し、ブロックの色に応じて2つのクラスsl-slope-blackとsl-slope-pinkのみを追加します。
<section class="se-container"> <div class="se-slope sl-slope-black"> <article class="se-content"> <h3>Some headline</h3> <p>Some text</p> </article> </div> <div class="se-slope sl-slope-pink"> <!-- ... --> </div> <!-- ... --> </section>
スタイルに取りかかりましょう。
スタイル
se-containerクラスのWebページとブロックは、最初の例と同じスタイルになります。
body{ background: #e90089 } .se-container{ display: block; width: 100%; overflow: hidden; box-shadow: 0px 0px 10px #000; }
コンテンツを含むブロックは左側に回り、互いに接続します：
.se-slope{ width: 50%; height: 300px; position: relative; float: left; overflow: hidden; }
コンテンツにインデントを追加します。
.se-slope .se-content{ margin: 50px 100px 0px 100px; }
各ブロックの黒とピンクの背景を設定します。
.se-slope-black{ background: #000; } .se-slope-pink{ background: #e90089; }
黒いブロックの場合、擬似要素の後に：を適用して、矢印の形を作成します。 奇数の要素は左側に、偶数の要素は右側に配置されます。
.se-slope-black:nth-child(odd):after, .se-slope-black:nth-child(even):after{ content: ''; position: absolute; bottom: 0px; width: 0px; height: 0px; border-top: 150px solid transparent; border-bottom: 150px solid transparent; } .se-slope-black:nth-child(odd):after{ border-right: 60px solid #e90089; right: 0px; } .se-slope-black:nth-child(even):after{ border-left: 60px solid #e90089; left: 0px; }
ヘッダーにスタイルを追加します。
.se-content h3{ z-index: 10; font-size: 30px; margin-top: 60px; position: relative; display: inline-block; padding: 15px 20px; line-height: 40px; font-family: 'Bitter', 'Trebuchet MS', Arial; text-shadow: 1px 1px 1px rgba(0,0,0,0.9); } .se-slope.se-slope-black h3{ background: #e90089; } .se-slope.se-slope-pink h3{ background: #000; }
ヘッダーフォームにベベルを追加します。
.se-slope.se-slope-black h3:after, .se-slope.se-slope-black h3:before, .se-slope.se-slope-pink h3:after, .se-slope.se-slope-pink h3:before{ content: ''; width: 0px; height: 0px; top: 0px; position: absolute; } .se-slope.se-slope-black h3:after{ border-top: 70px solid transparent; border-left: 30px solid #e90089; right: -30px; } .se-slope.se-slope-black h3:before{ border-bottom: 70px solid transparent; border-right: 30px solid #e90089; left: -30px; } .se-slope.se-slope-pink h3:after{ border-top: 70px solid transparent; border-right: 30px solid #000; left: -30px; } .se-slope.se-slope-pink h3:before{ border-bottom: 70px solid transparent; border-left: 30px solid #000; right: -30px; }
テキストを装飾的な要素として使用します。 左のブロックでテキストを15度回転し、右のブロックで-15度回転します。
.se-content p{ position: absolute; z-index: 9; opacity: 0.3; font-size: 50px; text-align: left; transform-origin: top center; } .se-slope:nth-child(even) .se-content p{ transform: rotate(-15deg); top: -100px; right: -50px; text-align: left; width: 95%; } .se-slope:nth-child(odd) .se-content p{ transform: rotate(15deg); top: -100px; left: -50px; text-align: right; width: 90%; } .se-slope.sl-slope-pink .se-content p{ color: #000; }
2番目の例のデモンストレーション
以上です！ チュートリアルを楽しんでいただければ幸いです！