 <p><a href="http://jsfiddle.net/9uppsLqa/5/" rel="nofollow">http://jsfiddle.net/9uppsLqa/5/</a></p> <pre><code>.arrow_box { border-radius: .1875em; z-index: 99; position: relative; box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15); background-repeat: repeat-x; background-position: 0 0; background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%); background-color: #e1e1e1; margin-top: 3em; margin-left: .75em; margin-right: .75em; padding-left: 0; padding-bottom: 0; padding-right: 0; padding-top: 0; width: 340px; height: 160px; } .arrow_box:after, .arrow_box:before { border: 13px solid transparent; position: absolute; content: ''; left: 90%; bottom:100%; } .arrow_box:after { border-bottom-color: #fafafa; border-width: 14px; margin-left: -24px; } .arrow_box:before { border-bottom-color: #999; border-width: 15px; margin-left: -25px; } </code></pre>