半六边形悬停效果

Posted 2023-05-08

【中文标题】半六边形悬停效果

【英文标题】：Half Hexagon Hover Effect

【发布时间】：2015-09-10 11:01:21

【问题描述】：

这里有一个小例子：

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：

有什么想法吗？

【问题讨论】：

您应该始终将代码添加到问题本身中。演示链接很好，但您不应通过将链接格式化为代码块来绕过质量检查。我还将图片添加到问题中。

好吧！下次;-) THX

CSS 不是抽象几何的最佳工具。您应该尝试使用 SVG。

【参考方案1】：

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

您需要做的就是改变颜色和文本的位置。

.top 
  fill: red;

.top:hover 
  fill: blue;

.bottom 
  fill: orange;

.bottom:hover 
  fill: green;

<svg   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