Cara Membuat Border Zig-Zag Dengan HTML CSS

Border merupakan garis tepi dari sebuah elemet pada html yang dipakai untuk menambahkan efek pada tampilan website. Border sendiri bisa berupa garis lurus, bubble, garis putus-putus ataupun bisa menggunakan gambar. Dalam pembahasan kali ini saya akan membuat border zig-zag dengan html css. Bagaimana cara pembuatannya mari sahabat ikutin langkah-langkah berikut ini:

Langkah pertama sahabat siapkan file HTML yang berisi dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="zig-zag.css">
</head>
<body>
	<div class="container"></div>
</body>
</html>

Langkah berikutnya tambahkan style CSS seperti berikut:

body{
	margin:0;
	paading:0;
	background: #00e9ff;
}

.container{
	position: absolute;
	top:50%;
	width: 100%;
	height: 50%;
	background: #ffffff;
}

.container:before
{
	content: '';
	position: absolute;
	width: 100%;
	height: 15px;
	display: block;
	background: linear-gradient(
	45deg, transparent 33.33%,
	#45e8f7 33.33%, #45e8f7 66.66%,
	transparent 66.66% ),
	linear-gradient(
	-45deg, transparent 33.33%,
	#45e8f7 33.33%, #45e8f7 66.66%,
	transparent 66.66% );
	background-size: 30px 60px;
	transform: rotateX(180deg);
}

Jadi CSS diatas pada .container:before digunakan untuk membentuk zig-zag ,untuk ukuran bisa sahabat sesuaikan sesuai kebutuhan saja nanati bisa dirubah sendiri.

Sekarang sahabat bisa simpan kedua file, lalu coba jalankan dan dilihat pada browser masing-masing apakah sudah benar seperti ini:

Baiklah demikian pembahasan artikel kali ini tentang cara membuat border zig-zag dengan HTML CSS, sampai jumpa pada kesempatan pembahasan artikel lainnya.

Semoga bermanfaat dan selamat mencoba, terima kasih

Cara Membuat Border Zig-Zag Dengan HTML CSS

Kategori