feat: Add Diagonal section pattern

contents/_includes/patterns/diagonal-section.njk

@@ -0,0 +1,3 @@
+<div class="diagonal-section">
+    <div class="diagonal-section__diagonal"></div>
+</div>

contents/diagonal-section.md

@@ -0,0 +1,51 @@
+---
+layout: layouts/post.njk
+title: Diagonal section
+description: Create a diagonal section with CSS
+keywords: css diagonal section, css transform skew
+---
+
+## HTML
+
+```html
+<div class="diagonal-section">
+    <!-- The diagonal area -->
+    <div class="diagonal-section__diagonal"></div>
+
+    <!-- Content -->
+    ...
+</div>
+```
+
+## CSS
+
+```css
+.diagonal-section {
+    /* Used to position the diagonal area */
+    position: relative;
+}
+
+.diagonal-section__diagonal {
+    /* Absolute position */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* Create diagonal sides */
+    transform: skewY(-5deg);
+
+    /* Background color */
+    background-color: rgba(0, 0, 0, 0.3);
+
+    /* Displayed under the main content */
+    z-index: -1;
+}
+```
+
+{% demo %}
+{% include "patterns/diagonal-section.njk" %}
+{% enddemo %}

contents/index.njk

@@ -91,6 +91,12 @@ eleventyExcludeFromCollections: true
                     <div class="pattern__title">Curved background</div>
                 </a>
             </div>
+            <div class="pattern__item">
+                <a class="pattern__link" href="/diagonal-section/">
+                    <div class="pattern__cover">{% include "patterns/diagonal-section.njk" %}</div>
+                    <div class="pattern__title">Diagonal section</div>
+                </a>
+            </div>
         </div>
     </div>