弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 2888|回复: 0

CSS3实现六边形图片

[复制链接]
发表于 2019-11-18 19:42:14 | 显示全部楼层 |阅读模式
六边形图片,下面有三种实现方式:

第一种方式:
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%);
  }

html:

<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);
  }
html:

  <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;
  }

html:
  <div class="hexagon02">
    <div class="hexagon-inter">
      <div class="hexagon-cont"></div>
    </div>
  </div>
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-11-24 02:32 , Processed in 0.048373 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表