Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
	<div class="banner section-padding border">
		<div class="banner-text">
			<h2>CSS Zigzag borders</h2>
		</div>
	</div>
	<div class="content">
		<h3>CSS Zigzag borders</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit quos minima, ab accusamus velit enim iste temporibus autem nisi error natus commodi reiciendis sint veniam doloremque iure itaque architecto excepturi hic harum quam dignissimos, illo. Est vel suscipit magnam voluptas mollitia aliquid minus? Natus magnam dolor error at accusantium! Doloribus illo quisquam esse quidem pariatur, laudantium dolore accusantium atque unde fuga exercitationem enim adipisci eligendi et distinctio nam, dicta ab ea quis ipsum velit. Consequuntur est praesentium quod sint, in repellat reiciendis doloremque quae esse inventore nihil dignissimos a provident, eius ipsam labore assumenda, ducimus accusamus quos accusantium vero animi? Suscipit quidem aperiam laudantium porro, quia accusantium ea, minima mollitia, dicta repudiandae cumque est, sunt? Impedit officiis corporis ipsum sunt dicta eaque omnis quaerat debitis! Sequi eaque beatae esse minima at veritatis ipsa optio repudiandae quaerat, assumenda quasi enim reiciendis laudantium eum rem nam perspiciatis omnis, laboriosam nihil quae maxime cumque. Eligendi id doloribus, vero reprehenderit quae, illum odio unde ratione error quo minus, voluptate dolorum sed laborum. Magni dolor neque labore repudiandae consequatur eaque quas fugit cumque culpa voluptatibus pariatur recusandae enim debitis alias similique molestias corporis nisi, sed, iste non. Cumque illum excepturi nostrum fugiat eligendi nobis consequuntur tempore cupiditate eum dolor voluptatibus non ipsa eos animi impedit maiores ipsam, ab accusantium nam beatae, modi, magnam dolores neque! Pariatur quae minima voluptate sequi fugit dolore nihil consectetur, itaque libero. Placeat qui dolor neque doloribus tempore soluta hic expedita recusandae saepe, accusantium veritatis perferendis. Unde ipsum deleniti deserunt porro recusandae nihil iste, voluptas omnis, harum laudantium ex tempora facere. Consectetur, neque ab rem a fuga cumque vero ratione id dolore earum error aliquid accusamus optio aperiam ex quibusdam eaque tenetur totam doloremque! Quo voluptas mollitia aspernatur id dicta, quia animi doloribus, sapiente enim sint dolorum vero molestias consequuntur possimus, voluptatum officiis. Illo placeat, nihil cum sequi voluptatum voluptates aspernatur nulla accusamus facilis et repellendus, officia. Aut non magnam quae omnis vel cum deserunt quam corporis maiores et soluta quisquam totam, nihil accusantium! Corrupti, natus aliquid eveniet illo error iure tenetur voluptatum omnis nesciunt repudiandae voluptate, quaerat officiis fugit, corporis nobis laboriosam ex, vitae aspernatur? Dicta impedit esse amet eveniet, laborum quam aspernatur, suscipit nesciunt reiciendis quidem perspiciatis nisi delectus praesentium, dignissimos perferendis omnis nostrum deserunt. Enim cum nam vel dolorum, sint praesentium quisquam quidem commodi animi. Voluptates ea ut beatae. Saepe nisi, nobis qui dolorem aspernatur animi eius deleniti vel quasi fugiat impedit itaque, repellat, sequi cupiditate blanditiis temporibus dolore nesciunt. Libero veritatis ratione nostrum excepturi iste ut minima sint dolores ab, voluptate et officia provident alias, modi voluptatibus consectetur officiis eveniet quidem suscipit quod minus. Esse, animi neque suscipit illo molestias veniam fugiat, dolor nam quam minima totam in tenetur nihil magni perspiciatis, quaerat soluta dolores vero error consequatur! Aut quis natus facilis perspiciatis esse vel enim provident quasi quam at porro, omnis doloremque eos odio expedita distinctio dolores? Perferendis, officiis minima vitae alias tempora inventore veritatis, aliquid incidunt explicabo rem quis neque minus nam adipisci! Iste, nemo.</p>
	</div>

              
            
!

CSS

              
                body {
	margin: 0;
	padding: 0;
	font-family: poppins;
}
.section-padding {
	padding: 80px 0;
}
.banner {
	background-image: linear-gradient(to right, rgba(152, 9, 199, 0.7), rgba(152, 9, 199, 0.7)), url("https://images.pexels.com/photos/5063805/pexels-photo-5063805.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	color: #fff;
	height: 400px;
	background-attachment: fixed;
}
.border {
	position: relative;
}
.border:after {
	background: linear-gradient(-45deg, #ffffff 10px, transparent 0), linear-gradient(45deg, #ffffff 10px, transparent 0);
	background-position: left bottom;
	background-repeat: repeat-x;
	background-size: 12px 32px;
	content: " ";
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 25px;
}
h2 {
	padding: 65px 0;
	text-align: center;
	font-size: 80px;
	text-transform: uppercase;
}
.content {
	font-size: 18px;
	padding: 60px;
	line-height: 1.9;
	color: #262626;
}
.content h3 {
	font-size: 35px;
	text-align: center;
}

              
            
!

JS

              
                
              
            
!
999px

Console