scalable components 1: tips. Usage: <div class="tips">Contents goes here</div> with your own style: .tips { font-size: 150%; }. Define color below.

gistfile1.css

/* define color from inside to outside */
bg-color = white
border-color = grey
shadow-color = #ccc

.tips
  /* layout */
	z-index: 0
	position: absolute
	/* presentation */
	padding: 0.8em 1.2em
	border: 1px solid border-color
	border-radius: 0.25em
	box-shadow: 0 0 0.5em shadow-color

.tips::after
	content: ''
	z-index: -2
	position: absolute
	top: 0
	left: 0
	top: -0.5em
	left: 1em
	-webkit-transform: rotate(45deg)
	   -moz-transform: rotate(45deg)
	        transform: rotate(45deg)
	width: 1em
	height: 1em
	border: 1px solid border-color
	background-color: bg-color
	box-shadow: 0 0 0.5em shadow-color

.tips::before
	content: ''
	z-index: -1
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%
	background-color: bg-color
	border-radius: 0.25em