Membuat Menu Bidang Miring dengan CSS
Setiap situs memilki fitur yang akan memandu pengunjung bagi menelusuri ada apa saja di situs tersebut. Karenanya dari itu, peran fitur amat urgen. Apalagi apabila situs kita berisikan demikian itu banyak informasi. Sehingga kita perlu menatanya dengan bagus.
Berbicara mengenai fitur, sesuai dengan pembahasan kita kali ini yaitu bagaimana cara membuat menu bidang miring dengan css. Bidang miring disini yaitu style kita pada menampilkan fitur agar terlihat menarik. Agar pengunjung pun tak bosan, dan yang terpenting yaitu fitur situs kita menjadi lebih mengandung informasi.
Oke seketika saja kita mulai prakteknya, pertama-tama kalian mesti bikin file html terlebih dahulu. Kalian dapat salin contoh code dibawah ini.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Halaman situs dengan garis mirin</title>
<style type=”text/css”>
body{
background: #ccc;
}
.container{
width: 800px;
margin:auto;
}
.fitur li a{
text-decoration:none;
color: #333333;
}
.fitur li{
float: left;
padding: 10px 20px;
background: red;
position: relative;
list-style: none;
margin: 0 21px;
text-decoration: none;
}
.fitur li:before{
content: “”;
position: absolute;
top: 0;
left: -40px;
border-top: 38px solid red;
border-left: 40px solid transparent;
}
.fitur li:after{
content: “”;
position: absolute;
top: 0;
right: -40px;
border-bottom: 38px solid red;
border-right: 40px solid transparent;
}
</style>
</head>
<body>
<div class=”container”>
<ul class=”fitur”>
<li> <a href=”#”>Link 1</a> </li>
<li> <a href=”#”>Link 2</a> </li>
<li> <a href=”#”>Link 3</a> </li>
<li> <a href=”#”>Link 4</a> </li>
</ul>
</div>
</body>
</html>
Setelah telah kalian simpan filenya. Bagi melihat hasilnya kalian dapat buka file tersebut lewat browser kesayangan kalian. Apabila berhasil karenanya tampilnya akan seperti ini.
Karenanya tampilan menunya akan menjadi seperti gambar diatas. Di umumnya format fitur hanya kotak persegi panjang, namun dengan adanya fitur dari css, kita dapat bikin dengan format yang dapat kita atur sesuai dengan keinginan kita. Ini yaitu diantara contoh pengaplikasianya. Kalian dapat kembangkan lagi sesuai dengan keinginan kalian.
Demikianlah pembahasan mengenai bagaimana cara membuat menu bidang miring dengan css. Semoga artikel kali ini bermanfaat. Hingga jumpa di artikel berikutnya.
Sumber https://kursuswebsite.org
