scss 六角裁剪图像SASS mixin

Posted 2021-05-18

//http://codepen.io/brenna/pen/hbDqL
@mixin hexagon($size: 300px, $background: url(http://placekitten.com/g/650), $shadow: 0 0 20px rgba(0,0,0,0.8), $borderWidth: 3px){
  $scaleFactor: tan(30deg); /*this smushes a square into a 60deg/120deg rhombus*/
  $inverseScale: 1/$scaleFactor;
  $sideLength: $size/sqrt(3);
  $totalHeight: $sideLength + $size;
  $boxShadow: $shadow;
  $scaledBorderWidth: $borderWidth/$scaleFactor;
  $border: solid #{$borderWidth} #fff;
  $scaledBorder: solid #{$scaledBorderWidth} #fff;
  
  position: relative;
  width: $size;
  height: $sideLength;
  margin-top: $size/3;
  margin-bottom: $size/3;
  background: $background;
  background-size: $totalHeight auto;
  background-position: center center;
  box-shadow: $boxShadow; 
  border-left: $border;
  border-right: $border;
  
  .hex1,
  .hex2 {
    position: absolute;
    overflow: hidden;
    width: $size/sqrt(2);
    height: $size/sqrt(2);
    left: $sideLength/4 - $borderWidth + 1px; /*for some reason this 1px correction is needed */
    background: inherit;
    box-shadow: $boxShadow;
    @include transform(scaleY(#{$scaleFactor}) rotate(-45deg));
    
    &:after {
      /*counter rotate and un-scale the bg image*/
      content: "";
      position: absolute;
      left: -($sideLength/4 + 1px); /*same correction as up above */
      width: $size;
      height: $size/sqrt(2);
      top: 0;
      background: inherit;
      
      @include transform(rotate(45deg) scaleY(#{$inverseScale}));
    }
  }

  .hex1 {
    top: - $size/sqrt(2)/2;
    border-top: $scaledBorder;
    border-right: $scaledBorder;
    
    &:after {
      background-position: center 17%; 
      margin-top: -$scaledBorderWidth;
    }
  }
  
  .hex2 {
    bottom: -$size/sqrt(2)/2;
    border-left: $scaledBorder;
    border-bottom: $scaledBorder;
    
    &:after {
      background-position: center 83%;
      margin-left: - $scaledBorderWidth + 1px; /*that pesky single pixel correction again*/
    }
  }
  
  /*cover up the box shadows */
  &:after {
    content: "";
    position: absolute;
    top: $borderWidth/sqrt(2);
    bottom: 0;
    left: 0;
    right: 0;
    height: $sideLength - 2*$borderWidth/sqrt(2);
    background: inherit;
  }
}