jquery - 半六边形悬停效果

Question

这里我有一个小例子:

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;
  width: 100%;
}


.hex2 {
  @include rotate(120deg);
  height: 100%;
  position: relative;
  visibility: visible;
  width: 100%;
}

.desc {
  color: white;
  font-family: 'Lato', sans-serif;
  font-size: 0.8em;
  font-weight: 300;
  height: ($width * 2);
  line-height: 1.5em;
  position: absolute;
  text-align: center;
  text-transform: uppercase; 
  visibility: visible;
  width: $width;
  &.base {
    background: $pink;
  }
  &.one {
    background: $yellow;
  }
  &.two {
    background: $green;
  }
  &.three {
    background: $brown;
  }
  h2 {
    margin: ($width - ($width / 4)) 20px 0 20px;
  }
}

JS:(jQuery)

$(document).ready(function() {
  var color = 'one';
  var counter = 0;
  $('.desc').hide();
  $('.hexagon').hover(
    function() {
      $(this).find('.desc').fadeIn('fast');
      counter++;
      if (counter === 0) {
        color = 'base';
      } else if (counter === 1) {
        color = 'one';
      } else if (counter === 2) {
        color = 'two';
      } else if (counter === 3) {
        color = 'three';
      } else if (counter >= 4){
        counter = 0 ;
        color = 'base';
      }
      $(this).find('.desc').addClass(color);
    }, 
    function() {
      $(this).find('.desc').fadeOut('fast', function() {
        $(this).removeClass(color);
      });
    });
});

CodePen Demo

我找不到将六边形切成两部分的方法。

我现在被困住了。我想要一个半六边形，一个具有悬停效果的梯形。形状就是这个六边形。切口必须位于左下角到右上角之间。当我将鼠标悬停在六边形的左上角时，我希望在中心有另一个文本，而在将鼠标悬停在六边形的右下角部分时，我希望在中心有另一个文本。

喜欢this Logo :

有什么想法吗？

Answer 1

这种形状在 CSS 中是极其困难的。最好的选择是使用 SVG，它更容易构建、使用和设计此类几何形状的样式。

您需要做的就是更改颜色以及文本的位置。

.top {
  fill: red;
}
.top:hover {
  fill: blue;
}
.bottom {
  fill: orange;
}
.bottom:hover {
  fill: green;
}

<svg height="200" width="200" viewBox="0 0 100 116">
  <polygon points="2,31 52,2 98,29 89,34 52,13 11,36 11,79 2,84" class="top"></polygon>
  <polygon points="6,91 15,86 53,107 93,84 93,40 102,35 102,89 53,116" class="bottom"></polygon>
  <text x="40" y="60">test</text>
</svg>

• SVG | MDN