CSS arrow floating div

by Alon Rotem

HTML

<p>
    <div class="circular_avatar" style="float:left"></div>
    <div style="display:inline-block; float: left">Alon</div>
</p>
<p style="clear:both;">Resources:
    <ul>
        <li><a href="http://www.howtocreate.co.uk/tutorials/css/slopes" target="_blank">CSS tutorial - Using borders to produce angled shapes</a></li>
        <li><a href="http://cssarrowplease.com/" target="_blank">CSS ARROW PLEASE!</a></li>
<li><a href="http://yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/" target="_blank">CSS Quick Tip: CSS Arrows and Shapes Without Markup</a></li>
<li><a href="http://bavotasan.com/2011/circular-images-with-css3/" target="_blank">Circular Images with CSS3</a></li>        
        
        
            </ul>
</p>
bla bla bla<br/>bla bla bla<br/>bla bla bla<br/>bla bla bla<br/>
<div class="arrow_box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id libero vitae sapien lobortis eleifend. Praesent a orci nisl. Morbi ullamcorper mi eros, in maximus lectus condimentum nec. Curabitur lacus turpis, laoreet ut odio vitae, sodales dignissim nisi. Quisque vitae molestie mi. Morbi at vehicula nibh. Curabitur felis sapien, tincidunt eget libero ac, lacinia congue nisl. Pellentesque ac pellentesque dolor. Etiam quis mauris vitae arcu vehicula facilisis. Donec tincidunt bibendum varius. Praesent scelerisque posuere lacus et lacinia. Donec sit amet augue eu lorem tincidunt posuere quis sed ligula.
    <br/><br/>
Vivamus consectetur vitae dui vel feugiat. Quisque lacinia velit ut dui posuere tincidunt. Sed eget sapien rutrum, volutpat nunc eget, aliquet sapien. Pellentesque ut euismod ligula. Aliquam vel iaculis felis. Fusce sed vestibulum nisi. Suspendisse semper imperdiet enim ut hendrerit. Sed posuere purus massa, id accumsan urna pellentesque at. Donec vulputate lorem risus, at rhoncus justo consectetur a. Donec fringilla ornare ex id hendrerit. Donec a sollicitudin augue. Vivamus ac massa ex. Phasellus nec tellus non...

CSS

body {
    font-family: arial;
    font-size: 12px;
}

/* ------------ http://bavotasan.com/2011/circular-images-with-css3/ ---------------- */

.circular_avatar {
	width: 100px;
	height: 100px;
	border-radius: 150px;
	-webkit-border-radius: 150px;
	-moz-border-radius: 150px;
	background: url(https://media.licdn.com/mpr/mpr/shrinknp_400_400/p/2/005/077/3a6/321c33f.jpg) no-repeat;
	box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
	-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    background-size: 120px 120px;
    background-position: -17px -5px;
    display: inline-block;
}

/* ------------ http://cssarrowplease.com/ ---------------- */
.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 4px solid #c2e1f5;
    width: 700px;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #88b7d5;
	border-width: 10px;
	margin-left: -10px;
}
.arrow_box:before {
	border-color: rgba(194, 225, 245, 0);
	border-bottom-color: #c2e1f5;
	border-width: 16px;
	margin-left: -16px;
}