Stylus でクリスマスツリー #CSS3

main.styl

@charset "UTF-8"
#wrapper
  margin 20px
  padding 5px
  background black

/* 台形 */
trapezoi(uplen, bottomlen, height, color = black)
  width uplen
  sidelen = (bottomlen - uplen) / 2
  border-bottom height solid color
  border-left sidelen solid transparent
  border-right sidelen solid transparent
  height 0


/* 二等辺三角形 */
triangle(bottomlen, height, color)
  trapezoi(0, bottomlen, height, color)

.christmas-tree
  w = 200px
  h = 50px
  k = 6
  width w
  treegreen = green
  > div
    margin 0 auto
  .star
    width w
    color yellow
    font-size 30px
    text-align center
    shadow = 0 0 10px white
    text-shadow shadow, shadow, shadow
    margin-bottom -10px
  .reaf
    border-radius 2px
    &:nth-of-type(2)
      rate = 0.3
      triangle(w * (1 - rate), h, treegreen)
    for i in (3..k)
      &:nth-of-type({i})
        rate = 0.3 - (0.2 * (1 / (k - 2) * (i - 2)))
        trapezoi(w * (1 - rate * (2.4 + 0.3 * (i - 3))), w * (1 - rate), h, treegreen)
  .trunk
    width (w / 8)
    height 20px
    background brown
  .pot
    width (w / 2)
    height 20px
    background orange

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>クリスマスツリー</title>
    <link rel="stylesheet" href="main.css" type="text/css" media="screen" charset="utf-8">
  </head>
  <body>
    <div id="wrapper">
      <div class="christmas-tree">
        <div class="star">★</div>
        <div class="reaf"></div>
        <div class="reaf"></div>
        <div class="reaf"></div>
        <div class="reaf"></div>
        <div class="reaf"></div>
        <div class="reaf"></div>
        <div class="trunk"></div>
        <div class="pot"></div>
      </div>
    </div>
  </div>

</body>
</html>

Stylusの文法盛り込んでみようと思ったけどいまいち

台形をBorderで表現してしまったがために box-shadow でのデコレーションも全く出来なかった