Draw a ribbon-like bookmark

bookmark.jade

// see:  http://jsfiddle.net/DBA4Q/

@import 'nib'

bookmark(color, width)
  width width
  height (width * 2)
  background linear-gradient(top, lighten(color, 35%) 5%, color 12%)
  position relative

  &:before
    content '\272A'
    position absolute
    left 18%
    top (width * 0.30)
    font (width * 0.84) Arial
    color darken(color, 35%)
    text-shadow 0 1px rgba(white, 0.2)

  &:after
    content ''
    position absolute
    bottom 0
    width 0
    height 0
    border-left (width / 2) dashed transparent
    border-right @border-left
    border-bottom (width * 0.30) dashed white

.bookmark-blue
  bookmark rgb(53,121,183), 50px

.bookmark-red
  bookmark rgb(179,43,46), 30px