Section Diagonal Areas

Size
2,810 Kb
Views
34,408

How do I make an section diagonal areas?

Using transforms to make sections of content trapezoidal in shape. Proof of concept for a future project.. What is a section diagonal areas? How do you make a section diagonal areas? This script and codes were developed by Jon Christensen on 03 August 2022, Wednesday.

Section Diagonal Areas Previews

Section Diagonal Areas - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Section Diagonal Areas</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <section class="section"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non fringilla est. Praesent tellus neque, tristique vitae libero scelerisque, blandit lobortis nisi. Nulla congue commodo finibus. Nullam dolor felis, pharetra at quam quis, lacinia pellentesque mauris. Integer maximus tincidunt orci, quis eleifend turpis. Nunc lobortis ut ipsum at egestas. Sed eget leo sed felis laoreet tristique et sit amet purus. Integer aliquet semper enim eu porta. Ut ut erat ex. Morbi congue ligula id massa venenatis, sed pharetra arcu ullamcorper. Curabitur feugiat dictum risus nec ullamcorper. Sed laoreet vel odio ac porta. Nulla tortor justo, dapibus in accumsan in, vestibulum bibendum dui. In at tincidunt mauris. Nullam turpis nulla, elementum sit amet sollicitudin sed, luctus sed ante. Nam ultrices mattis risus, vel viverra nisi vehicula vitae. </p> </div> </section> <section class="section"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non fringilla est. Praesent tellus neque, tristique vitae libero scelerisque, blandit lobortis nisi. Nulla congue commodo finibus. Nullam dolor felis, pharetra at quam quis, lacinia pellentesque mauris. Integer maximus tincidunt orci, quis eleifend turpis. Nunc lobortis ut ipsum at egestas. Sed eget leo sed felis laoreet tristique et sit amet purus. Integer aliquet semper enim eu porta. Ut ut erat ex. Morbi congue ligula id massa venenatis, sed pharetra arcu ullamcorper. Curabitur feugiat dictum risus nec ullamcorper. Sed laoreet vel odio ac porta. Nulla tortor justo, dapibus in accumsan in, vestibulum bibendum dui. In at tincidunt mauris. Nullam turpis nulla, elementum sit amet sollicitudin sed, luctus sed ante. Nam ultrices mattis risus, vel viverra nisi vehicula vitae. </p> </div> </section> <section class="section"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non fringilla est. Praesent tellus neque, tristique vitae libero scelerisque, blandit lobortis nisi. Nulla congue commodo finibus. Nullam dolor felis, pharetra at quam quis, lacinia pellentesque mauris. Integer maximus tincidunt orci, quis eleifend turpis. Nunc lobortis ut ipsum at egestas. Sed eget leo sed felis laoreet tristique et sit amet purus. Integer aliquet semper enim eu porta. Ut ut erat ex. Morbi congue ligula id massa venenatis, sed pharetra arcu ullamcorper. Curabitur feugiat dictum risus nec ullamcorper. Sed laoreet vel odio ac porta. Nulla tortor justo, dapibus in accumsan in, vestibulum bibendum dui. In at tincidunt mauris. Nullam turpis nulla, elementum sit amet sollicitudin sed, luctus sed ante. Nam ultrices mattis risus, vel viverra nisi vehicula vitae. </p> </div> </section> <section class="section"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non fringilla est. Praesent tellus neque, tristique vitae libero scelerisque, blandit lobortis nisi. Nulla congue commodo finibus. Nullam dolor felis, pharetra at quam quis, lacinia pellentesque mauris. Integer maximus tincidunt orci, quis eleifend turpis. Nunc lobortis ut ipsum at egestas. Sed eget leo sed felis laoreet tristique et sit amet purus. Integer aliquet semper enim eu porta. Ut ut erat ex. Morbi congue ligula id massa venenatis, sed pharetra arcu ullamcorper. Curabitur feugiat dictum risus nec ullamcorper. Sed laoreet vel odio ac porta. Nulla tortor justo, dapibus in accumsan in, vestibulum bibendum dui. In at tincidunt mauris. Nullam turpis nulla, elementum sit amet sollicitudin sed, luctus sed ante. Nam ultrices mattis risus, vel viverra nisi vehicula vitae. </p> </div> </section> <section class="section"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non fringilla est. Praesent tellus neque, tristique vitae libero scelerisque, blandit lobortis nisi. Nulla congue commodo finibus. Nullam dolor felis, pharetra at quam quis, lacinia pellentesque mauris. Integer maximus tincidunt orci, quis eleifend turpis. Nunc lobortis ut ipsum at egestas. Sed eget leo sed felis laoreet tristique et sit amet purus. Integer aliquet semper enim eu porta. Ut ut erat ex. Morbi congue ligula id massa venenatis, sed pharetra arcu ullamcorper. Curabitur feugiat dictum risus nec ullamcorper. Sed laoreet vel odio ac porta. Nulla tortor justo, dapibus in accumsan in, vestibulum bibendum dui. In at tincidunt mauris. Nullam turpis nulla, elementum sit amet sollicitudin sed, luctus sed ante. Nam ultrices mattis risus, vel viverra nisi vehicula vitae. </p> </div> </section>
</div>
</body>
</html>

Section Diagonal Areas - Script Codes CSS Codes

* { box-sizing: border-box;
}
.container { overflow: hidden; margin-bottom: -4em;
}
.section { display: block; padding: 4em; position: relative;
}
.section:after { background-size: cover; background-position: center; background-repeat: no-repeat; content: ''; top: 0; height: calc(100% + 3em); width: 100%; left: 0; display: block; position: absolute;
}
.section .content { position: relative; z-index: 1;
}
.section:nth-child(odd) { -webkit-transform: skewY(2deg); transform: skewY(2deg);
}
.section:nth-child(odd):after { background-image: url(http://placehold.it/1200x600);
}
.section:nth-child(odd) .content { -webkit-transform: skewY(-2deg); transform: skewY(-2deg);
}
.section:nth-child(even) { background-color: #eee; -webkit-transform: skewY(-2deg); transform: skewY(-2deg);
}
.section:nth-child(even):after { background-color: #eee;
}
.section:nth-child(even) .content { -webkit-transform: skewY(2deg); transform: skewY(2deg);
}
.section:first-child { -webkit-transform: skewY(0); transform: skewY(0);
}
.section:first-child .content { -webkit-transform: skewY(0); transform: skewY(0);
}
Section Diagonal Areas - Script Codes
Section Diagonal Areas - Script Codes
Home Page Home
Developer Jon Christensen
Username JMChristensen
Uploaded August 03, 2022
Rating 3
Size 2,810 Kb
Views 34,408
Do you need developer help for Section Diagonal Areas?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jon Christensen (JMChristensen) Script Codes
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!