A CodePen by MieMie. Hexagon image - css3 + html

index.slim

div.box
  div.inner1
  div.inner2

style.sass

@import "compass"
$boxHeight: 110px
$boxWidth: $boxHeight * 1.732 // sqrt(3)
$imageUrl: "http://img3.douban.com/view/photo/photo/public/p462657443.jpg"

.box
  position: relative
  @extend %box
  background: url($imageUrl) no-repeat

.inner1
  @extend %box
  @extend %inner
  -webkit-transform: rotate(60deg)
  &:after
    -webkit-transform: rotate(-60deg) translate(- $boxWidth/2, 0px)
  

.inner2
  @extend %box
  @extend %inner
  -webkit-transform: rotate(-60deg)
  &:after
    -webkit-transform: rotate(60deg) translate(0, - ($boxHeight*3/2))

%box
  height: $boxHeight
  width: $boxWidth
  background-position: 50% 50%
  
%inner
  z-index: -1
  position: absolute
  background: inherit
  overflow: hidden
  &:after
    height: 2 * $boxHeight
    width: $boxWidth
    content: ''
    position: absolute
    left: 0
    top: 0
    -webkit-transform-origin: 0 0
    z-index: 0
    background: inherit
    



// position
body, html
  height: 100%
  width: 100%
.box
  top: 45%
  left: 45%
// position end