Crooked section dividers

Developer

Size

4,708 Kb

Views

26,312

Crooked section dividers Previews
Crooked section dividers HTML Codes
Crooked section dividers CSS Codes

How do I make an crooked section dividers?

Dynamically crooked lines, headings, and backgrounds.. What is a crooked section dividers? How do you make a crooked section dividers? This script and codes were developed by Brandon Kennedy on 18 September 2022, Sunday.

Crooked section dividers Previews

Crooked section dividers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>crooked section dividers</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body { color: #666; min-width: 450px; overflow-x: hidden; padding-bottom: 80px;
}
.container { position: relative;
}
.container .content { padding: 20px 20px; position: relative; z-index: 20;
}
.container .content:after { bottom: -30px; content: ""; height: 50px; left: -5%; position: absolute; width: 110%; z-index: 0;
}
.container .content + h1,
.container .content + h2,
.container .content + h3,
.container .content + h4,
.container .content + h5,
.container .content + h6 { margin-top: .25em;
}
.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6 { background: white; display: block; height: 50px; margin: 1em 0 0; position: relative;
}
.container h1 span,
.container h2 span,
.container h3 span,
.container h4 span,
.container h5 span,
.container h6 span { background: white; border: 5px solid; border-radius: 30px; box-shadow: 0 0 0 5px white, inset 0 0 0 5px white; display: block; margin: 0 0 0 50px; padding: 10px 30px 5px; position: absolute; text-transform: uppercase; top: 50%; transform-origin: top left; z-index: 30;
}
.container h1:before,
.container h2:before,
.container h3:before,
.container h4:before,
.container h5:before,
.container h6:before { box-shadow: 0 0 0 5px white; content: ""; height: 5px; left: -5%; position: absolute; top: 50%; transform-origin: top left; width: 110%; z-index: 30;
}
.container h1:after,
.container h2:after,
.container h3:after,
.container h4:after,
.container h5:after,
.container h6:after { bottom: -40px; content: ""; height: 50px; left: -5%; position: absolute; width: 110%; z-index: 20;
}
.container h1:nth-child(4n+1) span,
.container h2:nth-child(4n+1) span,
.container h3:nth-child(4n+1) span,
.container h4:nth-child(4n+1) span,
.container h5:nth-child(4n+1) span,
.container h6:nth-child(4n+1) span { border-color: orangered; transform: rotate(-3deg) translateY(-25%);
}
.container h1:nth-child(4n+1):before,
.container h2:nth-child(4n+1):before,
.container h3:nth-child(4n+1):before,
.container h4:nth-child(4n+1):before,
.container h5:nth-child(4n+1):before,
.container h6:nth-child(4n+1):before { background: orangered; box-shadow: 0 0 0 5px white, 0 -10px 0 5px white; transform: rotate(2deg) translateY(-50%);
}
.container h1:nth-child(4n+1):after,
.container h2:nth-child(4n+1):after,
.container h3:nth-child(4n+1):after,
.container h4:nth-child(4n+1):after,
.container h5:nth-child(4n+1):after,
.container h6:nth-child(4n+1):after { background: #666; transform: rotate(2deg);
}
.container h1:nth-child(4n+1) + .content,
.container h2:nth-child(4n+1) + .content,
.container h3:nth-child(4n+1) + .content,
.container h4:nth-child(4n+1) + .content,
.container h5:nth-child(4n+1) + .content,
.container h6:nth-child(4n+1) + .content { background: #666; color: white;
}
.container h1:nth-child(4n+1) + .content:after,
.container h2:nth-child(4n+1) + .content:after,
.container h3:nth-child(4n+1) + .content:after,
.container h4:nth-child(4n+1) + .content:after,
.container h5:nth-child(4n+1) + .content:after,
.container h6:nth-child(4n+1) + .content:after { background: #666; transform: rotate(-2deg);
}
.container h1:nth-child(4n+1) + .content:last-child:after,
.container h2:nth-child(4n+1) + .content:last-child:after,
.container h3:nth-child(4n+1) + .content:last-child:after,
.container h4:nth-child(4n+1) + .content:last-child:after,
.container h5:nth-child(4n+1) + .content:last-child:after,
.container h6:nth-child(4n+1) + .content:last-child:after { box-shadow: 0 5px 0 0 white, 0 10px 0 0 orangered;
}
.container h1:nth-child(4n+3) span,
.container h2:nth-child(4n+3) span,
.container h3:nth-child(4n+3) span,
.container h4:nth-child(4n+3) span,
.container h5:nth-child(4n+3) span,
.container h6:nth-child(4n+3) span { border-color: lawngreen; transform: rotate(3deg) translateY(-50%);
}
.container h1:nth-child(4n+3):before,
.container h2:nth-child(4n+3):before,
.container h3:nth-child(4n+3):before,
.container h4:nth-child(4n+3):before,
.container h5:nth-child(4n+3):before,
.container h6:nth-child(4n+3):before { background: lawngreen; transform: rotate(-2deg) translateY(100%); transform-origin: bottom left;
}
.container h1:nth-child(4n+3):after,
.container h2:nth-child(4n+3):after,
.container h3:nth-child(4n+3):after,
.container h4:nth-child(4n+3):after,
.container h5:nth-child(4n+3):after,
.container h6:nth-child(4n+3):after { background: white; bottom: -16px; transform: rotate(-2deg);
}
.container h1:nth-child(4n+3) + .content,
.container h2:nth-child(4n+3) + .content,
.container h3:nth-child(4n+3) + .content,
.container h4:nth-child(4n+3) + .content,
.container h5:nth-child(4n+3) + .content,
.container h6:nth-child(4n+3) + .content { background: white; color: #666;
}
.container h1:nth-child(4n+3) + .content:after,
.container h2:nth-child(4n+3) + .content:after,
.container h3:nth-child(4n+3) + .content:after,
.container h4:nth-child(4n+3) + .content:after,
.container h5:nth-child(4n+3) + .content:after,
.container h6:nth-child(4n+3) + .content:after { background: white; transform: rotate(2deg);
}
.container h1:nth-child(4n+3) + .content:last-child:after,
.container h2:nth-child(4n+3) + .content:last-child:after,
.container h3:nth-child(4n+3) + .content:last-child:after,
.container h4:nth-child(4n+3) + .content:last-child:after,
.container h5:nth-child(4n+3) + .content:last-child:after,
.container h6:nth-child(4n+3) + .content:last-child:after { box-shadow: 0 5px 0 0 white, 0 10px 0 0 lawngreen, 0 15px 0 0 white, 0 60px 0 10px #666;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <h1><span>h1 heading</span></h1> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p> </div> <h1><span>h1 heading</span></h1> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at.</p> </div> <h2><span>h2 heading</span></h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis.</p> </div> <h2><span>h2 heading</span></h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus.</p> </div> <h2><span>h2 heading</span></h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p> </div> <h3><span>h3 heading</span></h3> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p> </div> <h4><span>h4 heading</span></h4> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p> </div> <h5><span>h5 heading</span></h5> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p> </div> <h6><span>h6 heading</span></h6> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc mattis purus erat, et congue lacus condimentum sed. Nulla convallis purus orci, vel fringilla ligula maximus at. Quisque dui mauris, efficitur condimentum pulvinar id, accumsan eu felis. Sed sit amet tortor a enim aliquet cursus. Mauris convallis nunc at purus viverra, a tristique sem lobortis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p> </div> <h6><span>h6 heading</span></h6> <div class="content"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ac lorem nec diam viverra posuere sed vel lectus. Donec laoreet fringilla placerat.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Crooked section dividers - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { color: #666; min-width: 450px; overflow-x: hidden; padding-bottom: 80px;
}
.container { position: relative;
}
.container .content { padding: 20px 20px; position: relative; z-index: 20;
}
.container .content:after { bottom: -30px; content: ""; height: 50px; left: -5%; position: absolute; width: 110%; z-index: 0;
}
.container .content + h1,
.container .content + h2,
.container .content + h3,
.container .content + h4,
.container .content + h5,
.container .content + h6 { margin-top: .25em;
}
.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6 { background: white; display: block; height: 50px; margin: 1em 0 0; position: relative;
}
.container h1 span,
.container h2 span,
.container h3 span,
.container h4 span,
.container h5 span,
.container h6 span { background: white; border: 5px solid; border-radius: 30px; box-shadow: 0 0 0 5px white, inset 0 0 0 5px white; display: block; margin: 0 0 0 50px; padding: 10px 30px 5px; position: absolute; text-transform: uppercase; top: 50%; transform-origin: top left; z-index: 30;
}
.container h1:before,
.container h2:before,
.container h3:before,
.container h4:before,
.container h5:before,
.container h6:before { box-shadow: 0 0 0 5px white; content: ""; height: 5px; left: -5%; position: absolute; top: 50%; transform-origin: top left; width: 110%; z-index: 30;
}
.container h1:after,
.container h2:after,
.container h3:after,
.container h4:after,
.container h5:after,
.container h6:after { bottom: -40px; content: ""; height: 50px; left: -5%; position: absolute; width: 110%; z-index: 20;
}
.container h1:nth-child(4n+1) span,
.container h2:nth-child(4n+1) span,
.container h3:nth-child(4n+1) span,
.container h4:nth-child(4n+1) span,
.container h5:nth-child(4n+1) span,
.container h6:nth-child(4n+1) span { border-color: orangered; transform: rotate(-3deg) translateY(-25%);
}
.container h1:nth-child(4n+1):before,
.container h2:nth-child(4n+1):before,
.container h3:nth-child(4n+1):before,
.container h4:nth-child(4n+1):before,
.container h5:nth-child(4n+1):before,
.container h6:nth-child(4n+1):before { background: orangered; box-shadow: 0 0 0 5px white, 0 -10px 0 5px white; transform: rotate(2deg) translateY(-50%);
}
.container h1:nth-child(4n+1):after,
.container h2:nth-child(4n+1):after,
.container h3:nth-child(4n+1):after,
.container h4:nth-child(4n+1):after,
.container h5:nth-child(4n+1):after,
.container h6:nth-child(4n+1):after { background: #666; transform: rotate(2deg);
}
.container h1:nth-child(4n+1) + .content,
.container h2:nth-child(4n+1) + .content,
.container h3:nth-child(4n+1) + .content,
.container h4:nth-child(4n+1) + .content,
.container h5:nth-child(4n+1) + .content,
.container h6:nth-child(4n+1) + .content { background: #666; color: white;
}
.container h1:nth-child(4n+1) + .content:after,
.container h2:nth-child(4n+1) + .content:after,
.container h3:nth-child(4n+1) + .content:after,
.container h4:nth-child(4n+1) + .content:after,
.container h5:nth-child(4n+1) + .content:after,
.container h6:nth-child(4n+1) + .content:after { background: #666; transform: rotate(-2deg);
}
.container h1:nth-child(4n+1) + .content:last-child:after,
.container h2:nth-child(4n+1) + .content:last-child:after,
.container h3:nth-child(4n+1) + .content:last-child:after,
.container h4:nth-child(4n+1) + .content:last-child:after,
.container h5:nth-child(4n+1) + .content:last-child:after,
.container h6:nth-child(4n+1) + .content:last-child:after { box-shadow: 0 5px 0 0 white, 0 10px 0 0 orangered;
}
.container h1:nth-child(4n+3) span,
.container h2:nth-child(4n+3) span,
.container h3:nth-child(4n+3) span,
.container h4:nth-child(4n+3) span,
.container h5:nth-child(4n+3) span,
.container h6:nth-child(4n+3) span { border-color: lawngreen; transform: rotate(3deg) translateY(-50%);
}
.container h1:nth-child(4n+3):before,
.container h2:nth-child(4n+3):before,
.container h3:nth-child(4n+3):before,
.container h4:nth-child(4n+3):before,
.container h5:nth-child(4n+3):before,
.container h6:nth-child(4n+3):before { background: lawngreen; transform: rotate(-2deg) translateY(100%); transform-origin: bottom left;
}
.container h1:nth-child(4n+3):after,
.container h2:nth-child(4n+3):after,
.container h3:nth-child(4n+3):after,
.container h4:nth-child(4n+3):after,
.container h5:nth-child(4n+3):after,
.container h6:nth-child(4n+3):after { background: white; bottom: -16px; transform: rotate(-2deg);
}
.container h1:nth-child(4n+3) + .content,
.container h2:nth-child(4n+3) + .content,
.container h3:nth-child(4n+3) + .content,
.container h4:nth-child(4n+3) + .content,
.container h5:nth-child(4n+3) + .content,
.container h6:nth-child(4n+3) + .content { background: white; color: #666;
}
.container h1:nth-child(4n+3) + .content:after,
.container h2:nth-child(4n+3) + .content:after,
.container h3:nth-child(4n+3) + .content:after,
.container h4:nth-child(4n+3) + .content:after,
.container h5:nth-child(4n+3) + .content:after,
.container h6:nth-child(4n+3) + .content:after { background: white; transform: rotate(2deg);
}
.container h1:nth-child(4n+3) + .content:last-child:after,
.container h2:nth-child(4n+3) + .content:last-child:after,
.container h3:nth-child(4n+3) + .content:last-child:after,
.container h4:nth-child(4n+3) + .content:last-child:after,
.container h5:nth-child(4n+3) + .content:last-child:after,
.container h6:nth-child(4n+3) + .content:last-child:after { box-shadow: 0 5px 0 0 white, 0 10px 0 0 lawngreen, 0 15px 0 0 white, 0 60px 0 10px #666;
}

Home Page	Home
Developer	Brandon Kennedy
Username	brandonkennedy
Uploaded	September 18, 2022
Rating	4
Size	4,708 Kb
Views	26,312

Do you need developer help for Crooked section dividers?

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!

Brandon Kennedy (brandonkennedy) Script Codes

Name	Size
Box-shadow loader	2,834 Kb
3D 2D Box-Shadow Fish	6,333 Kb
And yet another box shadow loader	7,615 Kb
Slug loader	3,481 Kb
CSS Animated Search Box Concepts	7,072 Kb
Compare Some Different Grid Systems	11,553 Kb
Change the Slide Behavior on Bootstrap Carousels	5,015 Kb
More loading	3,383 Kb
Scrolling helix	3,776 Kb
Lazyload.js	4,007 Kb

Create amazing marketing copy 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!

Similar Scripts & Codes

Name	Username	Size
Fullscreen audio play button	72	2,148 Kb
BabyStore	Pablo-Ai	3,807 Kb
TestTube CSS	EZPK	2,710 Kb
React Markdown Previewer	C0d0er	3,190 Kb
A Pen by Jonas Bjork	Jonasbjork	3,115 Kb
Importable Clearfix	Corysimmons	1,411 Kb
Canvas snow	Win7killer	2,572 Kb
Cool Page Split Effect	Anthonyadamski	6,128 Kb
APortfolio	Skybutterfly	5,174 Kb
A Different Type of Gallery	DonPage	2,950 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!