小编Kam*_*haf的帖子

这里有一个小例子:

HTML:

<section>
  <div class="hexagon">
    <div class="hex1">
      <div class="hex2" style="background: url('http://25.media.tumblr.com/tumblr_mb3lh6abw91rg4gq5o1_500.jpg') center no-repeat">
        <div class="desc">
          <h2>Normale Seite</h2>
        </div>
      </div>
      <!--/hex2-->
    </div>
    <!--/hex1-->
  </div>
  <!--/hexagon-->
</section>

CSS:(SCSS)

@import "compass/css3";

/* Variables */
$width: 300px;
$pink: rgba(230,0,98,.75);
$green: rgba(169,160,50,.75);
$yellow: rgba(252,171,55,.75);
$brown: rgba(83,70,54,.75);

body {
  background: #fff;
}

section {
  margin: 0 auto;
  text-align: center;
  width: 960px;
}

.hexagon {
  @include rotate(120deg);
  cursor: pointer;
  height: ($width *2);
  overflow: hidden;
  visibility: hidden;
  width: $width;
}

.hex1 {
  @include rotate(120deg);
  height: 100%;
  overflow: hidden; …