My Fb About Blog

1. Css Bubble Di Atas
.Atas {width:200px;margin:20px;min-height:40px;background:#00aa4a;color:#fff;border-radius:5px;padding:5px;position:relative;word-wrap:break-word;margin-bottom:2em;} .Atas:after {content:"";display:block;position:absolute;top:-20px; left:30px;width:0;height:0;border-color:transparent transparent #00aa4a transparent;border-style:solid; border-width:10px;}

2. Css Bubble Di Kanan
.Kanan {width:200px;margin:20px;min-height:40px;background:#00aa4a;color:#fff;border-radius:5px;padding:5px;position:relative;word-wrap:break-word;margin-bottom:2em;} .Kanan:after {content:"";display:block;position:absolute;top:10px;left:100%;width:0;height:0;border-color:transparent transparent transparent #00aa4a; border-style:solid; border-width:10px;}

3. Css Bubble Di Bawah
.Bawah {width:200px;margin:20px;min-height:40px;background:#00aa4a;color:#fff;border-radius:5px;padding:5px;position:relative;word-wrap:break-word;margin-bottom:2em;} .Bawah:after {content:"";display:block;position:absolute;top:100%;left:30px;width:0;height:0;border-color:transparent transparent transparent #00aa4a; border-style:solid; border-width:10px;}

4. Css Bubble Di Kiri
.Kiri {width:200px;margin:20px;min-height:40px;background:#00aa4a;color:#fff;border-radius:5px;padding:5px;position:relative;word-wrap:break-word;margin-bottom:2em;} .Kiri:after {content:"";display:block;position:absolute;top:10px;left:-20px;width:0;height:0;border-color:transparent transparent transparent #00aa4a; border-style:solid; border-width:10px;}

NB : Ganti Atas , Right , Bawah , Left Dengan Selector Yang Kamu Tentukan.. Contoh H3 ...

Anda Melihat Ada Efek Melengkung Rounded/Radius ... ???? Iyah Jika Kamu Ingin Membuat Seperti Gambar Melengkung Di Lihat Tutorialnya Di Cara Membuat Gambar Melengkung Rounded/Radius Menggunakan SVG Di Xtgem

Navigation