Amit Dhamu

Writes Code

Pure CSS Speech Bubble

.bubble {
   position: relative;
   width: 200px;
   padding: 10px;
   border: 1px solid #00ccff;
   background: #00ccff;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   margin-bottom: 10px;
}
/*----------------------------
  RIGHT ARROW
-----------------------------*/
.bubble:before {
    content: "";
    position: absolute;
    top: 30%;
    right: -15px;
    border-style: solid;
    border-width: 10px 0px 10px 15px;
    border-color: transparent #00ccff;
    display: block;
    width: 0;
    z-index: 0;
}
.bubble:after {
    content: "";
    position: absolute;
    top: 30%;
    right: -15px;
    border-style: solid;
    border-width: 10px 0px 10px 15px;
    border-color: transparent #00ccff;
    display: block;
    width: 0;
    z-index: 1;
}
/*----------------------------
   LEFT ARROW
-----------------------------*/
.bubble:before {
    content: "";
    position: absolute;
    top: 30%;
    left: -15px;
    border-style: solid;
    border-width: 10px 15px 10px 0px;
    border-color: transparent #00ccff;
    display: block;
    width: 0;
    z-index: 0;
}
.bubble:after {
    content: "";
    position: absolute;
    top: 30%;
    left: -15px;
    border-style: solid;
    border-width: 10px 18px 10px 0px;
    border-color: transparent #00ccff;
    display: block;
    width: 0;
    z-index: 1;
}


speech / bubble / css3 / css

← Implement Keyboard Shortcuts For Your Website Scroll To Bottom of Element →