Page Widget How to - Create CSS3 Bubbles with rounded border

Question

We would like to know how to create CSS3 Bubbles with rounded border.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.bubble {<!--from  w  w  w. ja v a 2  s  . com-->
    margin: 50px;
    padding: 50px;
    position: relative;
    border-radius: 0.5em;
}
.bubble:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50px;
    border-top: 20px solid blue;
    border-top-color: inherit; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent; 
}
  </style>
</head>
<body>
  <div class="bubble" style="background: green; border-color: green;">test</div>
</body>
</html>

The code above is rendered as follows: