Cacher is the code snippet organizer for pro developers

/**
 * CSS Bubble Arrow (border & pseudo approach)
 */
*{box-sizing: border-box}
.bubble{
    position: relative;
    background: lightblue;
    width: 200px;
    height: 100px;
    border-radius: 10px;
}
.bubble:after{
    content: '';
    position: absolute;   
    width:0; height: 0;
    border: 15px solid transparent;
    border-top-color: lightblue;
    top: 100%;
    left: 50%;
    margin-left: -20px
}
 

<div class="bubble"></div>

{"view":"separate","seethrough":"","prefixfree":"1","page":"all"}