Amit Dhamu

Software Engineer

Pure CSS Speech Bubble

For readability, I have used SCSS here.

.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
    -----------------------------*/
    &: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;
    }
    &: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
    -----------------------------*/
    &: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;
    }
    &: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 / sass

Implement Keyboard Shortcuts For Your WebsiteScroll To Bottom of Element

Show Comments