Triangle with the box-shadow

dabblet.css

/**
 * Triangle with the box-shadow
 */

.bubble {
	position: relative;

	width: 30em;
	height: 30em;

	border-radius: 3em; 

	background: pink;
	box-shadow: 0 .5em 1em rgba(0,0,0,0.3);
}

.triangle {
	position: absolute;
	top: 100%;
	left: 50%;
	
	width: 2em;
	height: 2em;
	
	clip: rect(0, auto, 5em, -2em);
}

.triangle:before {
	content: "";

	display:block;

	margin: -1em;
	height: 2em;
	width: 2em;

	background: pink;
	box-shadow: .3em .3em 1em rgba(0,0,0,0.3);

	transform: scale(0.8, 1) rotate(45deg);
}

dabblet.html

<div class="bubble">
	<div class="triangle"></div>
</div>

settings.json

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