ウェブサイト内の、ほんとに「ちょっとした図形」が欲しいときって意外とあります。
そんなときに、こんなサイトを見つけました。
The Shapes of CSS
http://css-tricks.com/examples/ShapesOfCSS/
こちらを参考に、ページトップへのスクロールに使えるボタンを作ってみました。
<div id="go-top"> <a href="#"><spa></span></a> </div>
#go-top { background: #00b7ee; bottom: 60px; border: 1px solid #fff; border-radius: 5px; display: none; height: 40px; position: fixed; right: 10px; width: 40px; z-index: 1000; } #go-top a { background: none; display: block; height: 40px; width: 40px; } #go-top span { display: block; width: 0; height: 0; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #fff; }
実際のものは右に出てる実装版をご確認下さい。