body { /* font-family: Courier, monospace; */ } .box { border-bottom: 1px solid #000; } .speaker { min-height: 80px; } .name { font-weight: bold; padding-top: 10px; } .face { height: 100px; } .bubble { border: 1px dotted; padding: 10px; border-radius: 10px; 10px; 10px; 10px; margin: 10px 320px; } .bubble.left { margin: 10px 220px; } .bubble.right { margin: 10px 220px; } .imgBox { text-align: center; width: 120px; } /* bubble from http://nicolasgallagher.com/pure-css-speech-bubbles/ Dual licensed under MIT and GNU GPLv2 � Nicolas Gallagher */ /* ============================================================================================================================ == BUBBLE WITH A BORDER AND TRIANGLE ** ============================================================================================================================ */ /* THE SPEECH BUBBLE ------------------------------------------------------------------------------------------------------------------------------- */ .triangle-border { position:relative; padding:15px; margin:1em 0 3em; /* border:5px solid #5a8f00; */ color:#333; background:#fff; /* css3 */ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } /* Variant : for left positioned triangle ------------------------------------------ */ .triangle-border.left { margin-left:140px; } /* Variant : for right positioned triangle ------------------------------------------ */ .triangle-border.right { margin-right:140px; } /* THE TRIANGLE ------------------------------------------------------------------------------------------------------------------------------- */ .triangle-border:before { content:""; position:absolute; bottom:-20px; /* value = - border-top-width - border-bottom-width */ left:40px; /* controls horizontal position */ border-width:20px 20px 0; border-style:solid; border-color:#aaa transparent; /* reduce the damage in FF3.0 */ display:block; width:0; } /* creates the smaller triangle */ .triangle-border:after { content:""; position:absolute; bottom:-13px; /* value = - border-top-width - border-bottom-width */ left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */ border-width:13px 13px 0; border-style:solid; border-color:#fff transparent; /* reduce the damage in FF3.0 */ display:block; width:0; } /* Variant : top ------------------------------------------ */ /* creates the larger triangle */ .triangle-border.top:before { top:-20px; /* value = - border-top-width - border-bottom-width */ bottom:auto; left:auto; right:40px; /* controls horizontal position */ border-width:0 20px 20px; } /* creates the smaller triangle */ .triangle-border.top:after { top:-13px; /* value = - border-top-width - border-bottom-width */ bottom:auto; left:auto; right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */ border-width:0 13px 13px; } /* Variant : left ------------------------------------------ */ /* creates the larger triangle */ .triangle-border.left:before { top:10px; /* controls vertical position */ bottom:auto; left:-30px; /* value = - border-left-width - border-right-width */ border-width:15px 30px 15px 0; border-color:transparent #aaa; } /* creates the smaller triangle */ .triangle-border.left:after { top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */ bottom:auto; left:-21px; /* value = - border-left-width - border-right-width */ border-width:9px 21px 9px 0; border-color:transparent #fff; } /* Variant : right ------------------------------------------ */ /* creates the larger triangle */ .triangle-border.right:before { top:10px; /* controls vertical position */ bottom:auto; left:auto; right:-30px; /* value = - border-left-width - border-right-width */ border-width:15px 0 15px 30px; border-color:transparent #aaa; } /* creates the smaller triangle */ .triangle-border.right:after { top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */ bottom:auto; left:auto; right:-21px; /* value = - border-left-width - border-right-width */ border-width:9px 0 9px 21px; border-color:transparent #fff; } /* finish bubble */ /* this style is stole from http://www.vidarholen.net/contents/rage/ */ .face.toLeft { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; /* I love konqueror too, but sadly.. no */ -khtml-transform: scaleX(-1); }