StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here is an example of how you could use the <a href="http://css-tricks.com/snippets/css/css-triangle/" rel="nofollow">border-trick</a>:</p> <pre><code>#menu { height: 50px; width: 100%; border:1px solid #d0d0d0; /*gradient generator ftw*/ background-image: linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%); background-image: -o-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%); background-image: -moz-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%); background-image: -webkit-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%); background-image: -ms-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.45, rgb(249,249,249)), color-stop(0.72, rgb(255,255,255)) ); } #menu a { height: 100%; width: 100px; position: relative; display: inline-block; text-align: center; line-height: 300%; text-decoration: none; color: #848484; } #menu a:hover { color: black; } #menu a:hover:before { content: ''; position: absolute; bottom: -1px; left: 40%; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid white; z-index: 1; } #menu a:hover:after { content: ''; position: absolute; bottom: -1px; left: 40%; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 11px solid #d0d0d0; } </code></pre> <p>The <code>:after</code> pseudo-class is the border of the arrow where the <code>:before</code> pseudo-class is the arrow itself. <br /></p> <p>As you can see the <code>:after</code> pseudo-class is just an other arrow that is beneath the <code>:before</code> pseudo-class. With the width 1px bigger, you can see it sticking out that will function as a border.</p> <p><strong><a href="http://jsfiddle.net/rfn3j/" rel="nofollow">jsFiddle</a></strong></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload