menu-miring

Membuat object miring dengan css 3

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn

Mungkin dari anda pernah mendapatkan masalah dalam slicing untuk membuat object dengan bentuk yang unik seperti membuat miring tanpa menggunakan background image.

langsung saja kita peraktek.

  • Html
<body>
    <div class="container">
      <ul class="menu">
        <li> <a href="#">Link 1</a> </li>
        <li> <a href="#">Link 2</a> </li>
      </ul> 
    </div>
</body>
  • Css
body{
        background: brown;
      }

      .menu li a{
        text-decoration:none;
        color: #333333;
      }

      .menu li{
        float: left;
        padding: 10px 20px;
        background: yellow;
        position: relative;
        list-style: none;
        margin: 0 21px;
        text-decoration: none;
      }

      .menu li:before{
        content: "";
        position: absolute;
        top: 0;
        left: -40px;
        border-top: 40px solid yellow;
        border-left: 40px solid transparent;
      }

      .menu li:after{
        content: "";
        position: absolute;
        top: 0;
        right: -40px;
        border-bottom: 40px solid yellow;
        border-right: 40px solid transparent;
      }
  • Hasil

menu-miring

  • Penjelasan

Disini untuk membuat bagian yang miring, saya menggunakan “before” dan “after” untuk membuat object baru yang ditambahkan pada element <li>. kemudian ditambahkan style css3 untuk memberikan effect miring. code nya seperti berikut:

.menu li:before{
        content: "";
        position: absolute;
        top: 0;
        left: -40px;
        border-top: 40px solid yellow;
        border-left: 40px solid transparent;
      }

.menu li:after{
        content: "";
        position: absolute;
        top: 0;
        right: -40px;
        border-bottom: 40px solid yellow;
        border-right: 40px solid transparent;
      }

 

Untuk menambahkan effect ketika dihover tambahkan code css dibawah ini:

.menu li:hover,
      .menu li:hover a{
        background: green;
        color: #ffffff;
        cursor: pointer;
      }

      .menu li:hover:before{
        border-color: green;
        border-top: 40px solid green;
        border-left: 40px solid transparent;
      }

      .menu li:hover:after{
        border-color: green;
        border-bottom: 40px solid green;
        border-right: 40px solid transparent;
      }

selamat mencoba dan semoga bermanfaat.

BagikanShare on FacebookShare on Google+Tweet about this on TwitterEmail this to someoneShare on LinkedIn
About Ihsan atkia

Ihsan Atkia adalah seorang Front-end Developer yang merambah sebagai UI/UX Web Designer, kecintaannya terhadap dunia Desain muncul semasa sekolah menengah atas (SMA), dengan bergabung di komunitas desain, kemudian melanjutkan di salah satu perguruan tinggi negeri di kota Bandung mengambil jurusan Teknik Informatika, aktif di salah satu club yang bernama Ruang Grafis dan menjadi pengurus club tersebut. dan sampai sekarang masih berkecimpung didunia Web Design khususnya bidang Front-end Developer dan UI/UX Web Designer.