Home/Explore/

Diagonal section

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<div style="
    /* Used to position the diagonal area */
    position: relative;
">
    <!-- The diagonal area -->
    <div style="
        /* 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;
    " />

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

Related patterns

Curved background

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!