csslayout/contents/diagonal-section.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Diagonal section	Create a diagonal section with CSS	css diagonal section, css transform skew

HTML

<div class="diagonal-section">
    <!-- The diagonal area -->
    <div class="diagonal-section__diagonal"></div>

    <!-- Content -->
    ...
</div>

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 %}