CSS triangle with specific filled color

css-triangle.styl

/**
 * From twitter bootstrap
 */
popoverArrowOuterWidth = 10px
popoverArrowWidth = 9px
popoverArrowOuterColor = #CCC
popoverArrowColor = #FFF

.popover
	position: absolute
	top: 0
	left: 0
	border(popoverArrowOuterColor)
	border-radius(6px)
	box-shadow(0 5px 10px rgba(0,0,0,.2))
	margin-top: popoverArrowOuterWidth
	background: popoverArrowColor

// Arrows
.popover .arrows,
.popover .arrows:after
	position: absolute
	display: block
	width: 0
	height: 0
	border-color: transparent
	border-style: solid

.popover .arrows
	border-width: popoverArrowOuterWidth
	&:after
		border-width: popoverArrowWidth
		content: ""

// default bottom
.popover .arrows
	left: 50%
	margin-left: - popoverArrowOuterWidth
	border-top-width: 0
	border-bottom-color: #999 // IE8 fallback
	border-bottom-color: popoverArrowOuterColor
	top: - popoverArrowOuterWidth
	&:after
		top: 1px
		margin-left: - popoverArrowWidth
		border-top-width: 0
		border-bottom-color: popoverArrowColor

tooltip.styl

/**
 * :after triangle is a little smaller than :before to cover as background color
 * ajust top and left to fill in perfect
 * border-color without transparent control the direction of triangle
 * border-width control the size
 */
.tooltip {
	$borderWidth = 10px;
	$borderColor = #CCC;
	$fillColor = #FFF;

	position: absolute;
	width: 280px
	padding: 1.5em
	border: 1px solid $borderColor;
	background: $fillColor

	&:before,
	&:after {
		content: '';
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: $borderWidth;
	}

	&.top {
		$left = 50%;
		$top = -20px;

		&:before {
			top: $top;
			left: $left;
			border-color: transparent transparent $borderColor;
		}
		&:after {
			top: $top + 1;
			left: $left;
			border-color: transparent transparent $fillColor;
		}
	}

	&.left {
		$top = 50%
		$left = -20px

		&:before {
			border-color: transparent $borderColor transparent transparent
			top: $top
			left: $left
			margin-top: - $borderWidth
		}
		&:after {
			border-color: transparent $fillColor transparent transparent
			top: $top
			left: $left + 1
			margin-top: - $borderWidth
		}
	}
}