Scalable components 1: tips.

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