CSS Efek Kotak Benjolan

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;}