如何使用css3实现图片六边形效果-杂谈-何三笔记

背景

最近在做网页式遇到如何使用css3实现图片六边形效果的事情，研究了下，可以使用css3和div配合实现，效果如下：

如何使用css3是此案图片六边形效果

实现方式如下：

方式一

css 代码如下：

 .hexagon-img {
    width: 200px;
    height: 231px;
    background: url('./girl.jpg') center center no-repeat;
    background-size: cover;
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }

div代码如下：

<div class="hexagon-img"></div>

方式二

css代码如下：

.hexagon {
    width: 200px;
    height: 231px;
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
  }

  .hexagon .hexagon-cont {
    width: 100%;
    height: 100%;
    visibility: visible;
    background: url('./girl.jpg') center center no-repeat;
    background-size: cover;
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
  }

div代码如下：

<div class="hexagon">
    <div class="hexagon-cont"></div>
  </div>

方式三

css代码如下:

.hexagon02,
  .hexagon02 .hexagon-inter,
  .hexagon02 .hexagon-cont {
    width: 200px;
    height: 231px;
    overflow: hidden;
    visibility: hidden;
  }

  .hexagon02 {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
  }

  .hexagon02 .hexagon-inter,
  .hexagon02 .hexagon-cont {
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
  }

  .hexagon02 .hexagon-cont {
    background: url('./girl.jpg') center center no-repeat;
    background-size: cover;
    visibility: visible;
  }

div代码如下：

 <div class="hexagon02">
    <div class="hexagon-inter">
      <div class="hexagon-cont"></div>
    </div>
  </div>