css background triangle tampilan mobile mywapblog

Trik membuat efek triangle atau speech bubble. preview dan css yang digunakan ialah :

1. EFEK CSS BUBBLE ATAS

.up { width: 200px; margin: 20px; min-height: 40px; background: black; color: white; border-radius: 5px;padding: 5px; position: relative; word-wrap: break-word; margin-bottom: 2em;} .up:after { content:''; display: block; position: absolute; top: -20px; left: 30px; width: 0; height: 0; border-color: transparent transparent black transparent; border-style: solid; border-width: 10px;}

2. EFEK CSS BUBBLE KANAN

.right { width: 200px; margin: 20px; min-height: 40px; background: black; color: white; border-radius: 5px;padding: 5px; position: relative; word-wrap: break-word; margin-bottom: 2em;} .right:after { content:''; display:block; position:absolute; top:10px; left:100%; width:0; height:0; border-color: transparent transparent transparent black; border-style: solid; border-width: 10px;}

3. EFEK BUBBLE BAWAH

.down { width: 200px; margin: 20px; min-height: 40px; background: black; color: white; border-radius: 5px;padding: 5px; position: relative; word-wrap: break-word; margin-bottom: 2em;} .down:after { content:''; display:block; position:absolute; top:100%; left:30px; width:0; height:0; border-color: black transparent transparent transparent; border-style: solid; border-width: 10px;}

4.EFEK BUBBLE KIRI

.down { width: 200px; margin: 20px; min-height: 40px; background: black; color: white; border-radius: 5px;padding: 5px; position: relative; word-wrap: break-word; margin-bottom: 2em;}.left:after { content:''; display:block; position:absolute; top:10px; left:-20px; width:0; height:0; border-color: transparent black transparent transparent; border-style: solid; border-width: 10px;}
NOTE :
.top, .right, .down, .left Diganti dengan selector target yang anda inginkan

Pada gambar diatas saya melihat ada lengkungan jadi itu menggunakan CSS SVG atau apa ajah background yang menurut anda cocok, Jika target css ini anda gunakan pada pemberi komentar biar kelihatan warna warni anda juga dapat menyisipkan css TRIK MEMBUAT BACKGROUND WARNA WARNI PADA KOMENTAR MWB

Dan akhirnya SALAM UKHUWAH selalu, tambahan, kritik serta saran dipersilahkan tentunya, oke abang dan kaka mua mua see you :)

Artikel Berkaitan

1. Css Efek Kertas Bertumpuk Mywapblog
2. Css Efek Benjolan Mywapblog
3. Mempersingkat Css border
4. Efek Sudut Terlipat Mywapblog