How to make CSS Zigzag borders

byCodingFlicks -November 15, 2020

0

Hello Friends, today, we are creating a snippet based on How to make a Zigzag border using HTML and CSS. Here we will make a CSS zigzag vertical edge for the banner image. We often see websites using curved or different shaped frames to make their website look aesthetic and slightly different from the traditional website. Zigzag borders are often used for the banner image or the other sections like services, portfolios, blogs, etc.

Here in this project of How to make the Zigzag border, we are using plain HTML and CSS. You can see the demo video below for having some idea about how the project will like at the end.

I hope you have watched the video demo of the project. I have taken div named 'banner' in the HTML part and added two more classes, 'section-padding' and 'border.' Inside the 'banner' div, I have another div named 'banner-text' and placed a random text as a banner text. After the banner part, I have taken another div called 'content' and provided a random content header and some text.

You may also like:

First, in the CSS part, I have taken margin padding o zero for the body element to eliminate the document's default margin and padding. I have taken Poppins as the primary fonts, but you can take any google fonts you want. After proving a custom padding for the banner part, I have given the 'banner' class a background image and a height of 400px. I have also provided 'background-attached: fixed' for making a simple-looking parallax while we will scroll down the page. Then I have given the border a relative position value. Using the 'border' class's pseudo-element, we have created the banner image's zigzag edge. Without further explanation, I am providing you the code for you to look at.

CSS Zigzag border (Source Code):

to create the snippet, you have to make an HTML and CSS file. Please copy the code below and paste it into the appropriate file and save it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>How to make CSS Zigzag borders</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="banner section-padding border">
		<div class="banner-text">
			<h2>Header Content</h2>
		</div>
	</div>
	<div class="content">
		<h3>Content Header</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>
</body>
</html>

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/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
	-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;
}

I hope you liked this simple yet exciting project. Please follow our social media profiles to stay connected with this blog. Thank you for visiting the blog, and keep visiting.

Please do not enter any spam link in the comment box.