Untitled

dabblet.css

body {
  padding-top: 100px;
  padding-left: 30px;
  font: 12px arial;
}

div.ballon {
  position: absolute;
  display: inline-block;
  border: 1px solid #EEE;
  box-shadow: 1px 1px 1px 1px #F6F6F6, -1px -1px 1px 1px #F6F6F6;
  border-radius: 2px;
}

div.arrow {
  border: 7px solid #FFF;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-width: 0;
  
  margin-top: -7px;
  margin-left: 8px;
  
  width: 0;
  height: 0;
}

div.arrow-shadow {
  border: 8px solid #E6E6E6;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-width: 0;
  
  margin-top: -8px;
  margin-left: 7px;
  
  width: 0;
  height: 0;
}

div.content {
  width: 100px;
  padding: 5px 7px;
}

dabblet.html

<div class="ballon">
  <div class="arrow-shadow"></div>
  <div class="arrow"></div>
  <div class="content">
    Content is here
  </div>
</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}