ちょっとした図形をCSS3で

ウェブサイト内の、ほんとに「ちょっとした図形」が欲しいときって意外とあります。
そんなときに、こんなサイトを見つけました。

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;
}

実際のものは右に出てる実装版をご確認下さい。