membuat efek sudut terlipat mywapblog dengan css

Cara membuat sudut terlipat dengan css mobile mwb, preview serta css yang diterapkan adalah

1. SUDUT TERLIPAT ATAS KIRI

#top { font-size: .8em; font-weight: bold; position: relative; margin: -26px 0 40px 0; float: right; color: #222; padding: 10px 30px; background-color: #3bbadb; clear: both; } #top:before { left: -6px; top: 0; border-color: transparent #555 #555 transparent; border-style: solid; } #top:after, #top:before { content: ''; position: absolute; }

2. SUDUT TERLIPAT KIRI KANAN

h1{ text-align: center; position: relative; color: #fff; margin: 0 -30px 30px -30px; padding: 10px 0; background: #5c5c5c; } h1:after, h1:before { content: ''; position: absolute; border-style: solid; border-color: transparent; bottom: -10px; } h1:before { border-width: 0 10px 10px 0; border-right-color: #222; left: 0; } h1:after { border-width: 0 0 10px 10px; border-left-color: #222; right: 0; }

3. SUDUT LIPAT KIRI

.left { font-size: 1em; position: relative; color: #222; background-color: #ccc; margin: 0 -20px 30px -26px; padding: 10px 0 10px 30px; } .left:before, .left:after { content: ''; position: absolute; border-style: solid; border-color: transparent; bottom: -6px; } .left:before { border-width: 0 6px 6px 0; border-right-color: #555; left: 0; }

4. SUDUT LIPAT KANAN

.right { font-size: 1em; position: relative; color: #222; background-color: #ccc; text-align: right; margin: 0 -26px 30px -20px; padding: 10px 30px 10px 0; } .right:before, .right:after { content: ''; position: absolute; border-style: solid; border-color: transparent; bottom: -6px; } .right:after { border-width: 0 0 6px 6px; border-left-color: #555; right: 0; }

NOTE :

Ganti selector top, h1, left, right dengan selector css yang akan digunakan.

Ini ada previewnya yang saya buat sebentar tadi jadi kurang sempurna mohon maaf karena hanya sekedar memperkuat artikel ini saja. oke ini DEMONYA.

Demikian maaf atas kekurangan, tambahan, kritik serta saran ditunggu. :)

Artikel Berkaitan

1. Css Efek Kertas Bertumpuk Mywapblog
2. Css Efek Benjolan Mywapblog
3. Mempersingkat Css border
4. Green Emotion For Mywapblog