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"> </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;
}