Two ways of making cylinders in SASS for webkit

gistfile1.sass

@mixin cylinder($width,$height,$proportion: .4)
  position: relative
  width: $width
  height: $height
  &:before, &:after
    // only using chrome for now, so not adding in moz
    -webkit-transform: scaley($proportion)
    width: $width
    height: $width
    border-radius: $width
    display: block
    content: ' '
    position: absolute
  &:before
    top: -1 * $width/2
  &:after
    top: $height - $width/2

gistfile2.sass

@mixin cylinder2($width,$height,$proportion: .4)
  position: relative
  width: $width
  height: $height
  &:before, &:after
    // only using chrome for now, so not adding in moz
    -webkit-border-radius: $width/2 $proportion * $width/2
    width: $width
    height: $proportion * $width
    display: block
    content: ' '
    position: absolute
  &:before
    top: -1 * $proportion * $width/2
  &:after
    top: $height - $proportion * $width/2