Create the illusion an element wrapping around a container. While this technique has been around for a while. It reamins a very interesting style that can help certain pieces of content pop-up. Depending on the class you select the code will pull an element off to the left, right or both sides, and add a triangle for the wrap around illusion. Vi…

wrap-around.css

/*  Wrap Around - http://jsbin.com/agegux/2/
---------------------------------------------------------------------------------

	The following code allows you to create the illusion an element
	wrapping around a container.

	While this technique has been around for a while. It reamins a very
	interesting style that can help certain pieces of content pop-up.
	
	Depending on the class you select the code will pull an element 
	off to the left, right or both sides, and add a triangle for the 
	wrap around illusion.

	Requirements:
		- Container must have 0 padding OR margins must be increased.

------------------------------------------------------------------------------ */

.wrap-left,
.wrap-right,
.wrap-both { position:relative; overflow:visible; }

/* Offset Element */
.wrap-left, .wrap-both { margin-left:-1.5em; }
.wrap-right, .wrap-both { margin-right:-1.5em; }

/* Configure Triangles */
.wrap-left:before, 
.wrap-right:after, 
.wrap-both:before,
.wrap-both:after { border-bottom:1.5em solid transparent; bottom:-1.5em; display:block; content:''; position:absolute; }

/* Left Triangle */
.wrap-left:before,
.wrap-both:before { border-right:1.5em solid #222; left:0; }

/* Right Triangle */
.wrap-right:after,
.wrap-both:after { border-left:1.5em solid #222; right:0; }

wrap-around.html

<div class="container">

  <!-- In this case, the Nav element wraps on both sides of the container -->
  <nav class="wrap-both">
    <ul>
      <li><a href="">Link #1</a></li>
      <li><a href="">Link #2</a></li>
      <li><a href="">Link #3</a></li>
      <li><a href="">Link #4</a></li>
    </ul>
  </nav>

  <!-- If the object is properly styled (width, height, position) it will wrap on the left side of the container -->
  <div class="object wrap-left">
    <p>Object Content</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quos possimus amet eaque maiores ipsam pariatur quaerat recusandae et reiciendis praesentium eum quia ducimus laudantium aspernatur enim odio commodi consectetur.</p>

  <!-- If the object is properly styled (width, height, position) it will wrap on the right side of the container -->
  <div class="object wrap-right">
    <p>Object Content</p>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti quos possimus amet eaque maiores ipsam pariatur quaerat recusandae et reiciendis praesentium eum quia ducimus laudantium aspernatur enim odio commodi consectetur.</p>

</div>