jdsteinbach
2/6/2012 - 8:35 PM

Pointing boxes, ice cream cone

Pointing boxes, ice cream cone

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
<div class="commentbox">This is where the comments go.</div>
<div class="commentbox admin">This is an administrator's reply to that silly comment above...</div>
<div class="topquote">The quote goes on top of this box.</div>
<div class="starbox">&nbsp;</div>
/*
Pointing boxes, ice cream cone
*/

div{
	width:400px;
	margin:40px auto;
	box-shadow: 5px 5x 0px 0px #000;
}
.commentbox{
	padding:2em;
	box-shadow:inset #000 4px 0px 5px -2px;
	background:green;
	font-family:Calibri;
	border-radius:20px;
	border-top-right-radius:0;
	border-bottom-right-radius: 0;
	border-color:green;
	position:relative;
	height:1em;
}
.commentbox.admin{
	background:blue;
	color:white;
	box-shadow:inset #000 -4px
	 0px 5px -2px;
	border-color:blue;
	border-radius:20px;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	padding:2em 2em 2em 2em;
	left:2.5em;
}
.commentbox:after {
	content:"";
	box-shadow:inset #000 0px 0px 2px 2px;
	position:absolute;
	left:100%;
	top:0em;
	border-top: 2.5em solid transparent;
	border-left: 2.5em solid black;
	border-bottom: 2.5em solid transparent;
	border-left-color:inherit;
}
.commentbox.admin:after {
	left:-2.5em;
	border-top: 2.5em dashed transparent;
	border-bottom: 2.5em dashed transparent;
	border-left:0;
	border-right: 2.5em solid black;
	border-right-color: inherit;
}
.topquote {
	color: white;
	background: rgba(0,0,0,.7);
	display: block;
	border-color: rgba(0,0,0,.7);
	padding: 1em;
	position: relative;
}
.topquote:before {
	height: 0;
	width: 0;
	position: absolute;
	display: block;
	content:'';
	top: -1em;
	left: 1em;
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-bottom: 1em solid rgba(0,0,0,.7);
}
.starbox{
	height:100px;
	width:100px;
	background-color:pink;
	border-color:brown;
	border-radius:50%;
	position:relative;
	box-shadow:inset #000 0px 0px 50px -25px;

}
.starbox:before{
	content:"";
	top:85px;
	left:15px;
	position:absolute;
	border-left:35px solid transparent;
	border-top:70px solid black;
	border-right:35px solid transparent;
	border-top-color: inherit;
}