Home > DeveloperSection > Articles > Speech Bubble Shapes in CSS

Speech Bubble Shapes in CSS


CSS-CSS3 CSS-CSS3 
Ratings:
0 Comment(s)
 6651  View(s)
Rate this:

Speech Bubble Shapes in CSS

Speech Bubble Shapes in CSS

#bubble-1

{

    background:red;

    width:300px;

    height:50px;

    position:relative;

    border-radius:10px;

    -moz-border-radius:10px;

    -webkit-border-radius:10px;

    left:40px;

}

#bubble-1:after

{

    position:absolute;

    content:"";

    width:0;

    height:0;

    border-top:10px solid transparent;

    border-bottom:10px solid transparent;

    border-right:40px solid red;

    right:100%;

    top:20px;     

}

 

Speech Bubble Shapes in CSS

#bubble-2

{

    background:red;

    width:300px;

    height:50px;

    position:relative;

    border-radius:10px;

    -moz-boredr-radius:10px;

    -webkit-border-radius:10px;

}

#bubble-2:after

{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-top:10px solid transparent;

    border-bottom:10px solid transparent;

    border-left:40px solid red;

    left:100%;

    top:20px;

}

 

Speech Bubble Shapes in CSS

#bubble-3

{

    width:300px;

    height:50px;

    background:red;

    position:relative;

    border-radius:10px;

    -moz-boredr-radius:10px;

    -webkit-border-radius:10px;

}

#bubble-3:after

{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-left:10px solid transparent;

    border-right:10px solid transparent;

    border-bottom:20px solid red;

    left:80%;

    top:-20px;

}

 

Speech Bubble Shapes in CSS

#bubble-4

{

    width:300px;

    height:50px;

    background:red;

    position:relative;

    border-radius:10px;

    -moz-boredr-radius:10px;

    -webkit-border-radius:10px;

}

#bubble-4:after

{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-left:10px solid transparent;

    border-right:10px solid transparent;

    border-top:20px solid red;

    right:80%;

    top:50px;

}

 

Speech Bubble Shapes in CSS

#bubble-5

{

    width:300px;

    height:50px;

    background:blue;

    position:relative;

    border-radius:10px;

    -moz-boder-radius:10px;

    -webkit-border-radius:10px;

}

#bubble-5:after

{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-top:20px solid blue;

    border-right:20px solid transparent;

    top:50px;

    right:80%

}

 

Speech Bubble Shapes in CSS

#bubble-6

{

    width:300px;

    height:50px;

    background:blue;

    position:relative;

    border-radius:10px;

    -moz-boder-radius:10px;

    -webkit-border-radius:10px;

}

#bubble-6:after

{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-bottom:20px solid blue;

    border-left:20px solid transparent;

    top:-20px;

    left:80%;

}

 

Speech Bubble Shapes in CSS

#bubble-7

{

    width:300px;

    height:50px;

    background:blue;

    position:relative;

    border-radius:10px;

    -moz-boder-radius:10px;

    -webkit-border-radius:10px;

}

#bubble-7:after

{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-bottom:15px solid blue;

    border-right:40px solid transparent;

    left:100%;

    top:10px;

}

 

Speech Bubble Shapes in CSS

#bubble-8

{

    width:300px;

    height:50px;

    background:blue;

    position:relative;

    border-radius:10px;

    -moz-boder-radius:10px;

    -webkit-border-radius:10px;

    left:60px;

}

#bubble-8:after

{

    content:"";

    position:absolute;

    width:0;

    height:0;

    border-bottom:15px solid blue;

    border-left:40px solid transparent;

    right:100%;

    top:10px;

}

 

Speech Bubble Shapes in CSS

#bubble-9

{

    width:300px;

    height:50px;

    border:5px solid #5a8f00;

    border-radius:10px ;

    -moz-border-radius:10px;

    -webkit-border-radius:10px;

    position:relative;

}

#bubble-9: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:#5a8f00 transparent;

    /* reduce the damage in FF3.0 */

    display:block;

    width:0;

}

#bubble-9: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;

}

 

Speech Bubble Shapes in CSS

#bubble-10

{

     width:300px;

    height:50px;

    border:5px solid #5a8f00;

    border-radius:10px ;

    -moz-border-radius:10px;

    -webkit-border-radius:10px;

    position:relative;

}

#bubble-10:before

{

    content:"";

    position:absolute;

    top:-20px; /* value = - border-top-width - border-bottom-width */

    bottom:auto;

    left:auto;

    right:40px; /* controls horizontal position */

    border-width:0 20px 20px;

    border-style:solid;

    border-color:#5a8f00 transparent;

    display:block;

    width:0;

}

#bubble-10:after

{

    content:"";

    position:absolute;

    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;

    border-style:solid;

    border-color:#fff transparent;

    display:block;

    width:0;

}

 


Don't want to miss updates? Please click the below button!

Follow MindStick