css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. in ie<9 not beauty

  2. Looking smooth. Small detail would be to put a negative margin of half the object width when positioning it 50% into the box.

  3. Looks really good! I made a variation that works a little better on IE8: http://codepen.io/mlms13/pen/DfImk

  4. Nice! I personally would change the top: -4px; of the arrow, to -3px. Now i can see the 2 other corners of the rectangle.

  5. Thanks for the nice Feedback!

  6. Used this codepin for the workshop after Square Code Camp presentation on CSS Architecture (https://speakerdeck.com/beausmith/css-architecture) After the talk we refactored the code in your example to meet the guidelines in the talk. Our final code: http://codepen.io/beau/pen/fLyql Thanks for sharing.

  7. Another workshop solution after teaching Sass and CSS Architecture: http://codepen.io/beau/pen/jdqEg

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.