实现原理：
这个效果的主要css样式有：
1.>transform: rotate(120deg); 图片旋转
2.>overflow:hidden; 超出隐藏
3.>visibility: hidden; 也是隐藏，与display:none;相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置

我们要用到3层div进行旋转来得到这个效果（ps:3层div的大小是一样的）。
最外层div(boxF)旋转120度。第二层(boxS)旋转-60度，第三层(boxT)再旋转-60度，此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置visibility: hidden; 而第3层div是放图片的，需要显示出来，因此设置visibility: visible; （ps:如果你不对第3层div设置visibility: visible;那它默认就会继承第二层div(boxS)的visibility: hidden; ）。经过旋转肯定有超出的部分，因此对3个div都设置overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意，那就是div的宽高比例必须满足4：5，不然得到的就不是6边形了。

下面给出DEMO代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>CSS3 实现六边形图片展示效果</title>
  6.     <style type="text/css">
  7.         body, div, img, ul, li
  8.         {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         body
  13.         {
  14.             font-size: 12px;
  15.             background-color: #DDD;
  16.             min-width: 1200px;
  17.         }
  18.         ul, ul li
  19.         {
  20.             list-style: none;
  21.         }
  22.  
  23.         .boxF, .boxS, .boxT, .overlay
  24.         {
  25.             width: 200px;
  26.             height: 250px;
  27.             overflow: hidden;
  28.         }
  29.         .boxF, .boxS
  30.         {
  31.             visibility: hidden;
  32.         }
  33.         .boxF
  34.         {
  35.             transform: rotate(120deg);
  36.             float: left;
  37.             margin-left: 10px;
  38.             -ms-transform: rotate(120deg);
  39.             -moz-transform: rotate(120deg);
  40.             -webkit-transform: rotate(120deg);
  41.         }
  42.         .boxS
  43.         {
  44.             transform: rotate(-60deg);
  45.             -ms-transform: rotate(-60deg);
  46.             -moz-transform: rotate(-60deg);
  47.             -webkit-transform: rotate(-60deg);
  48.         }
  49.         .boxT
  50.         {
  51.             transform: rotate(-60deg);
  52.             background: no-repeat 50% center;
  53.             background-size: 125% auto;
  54.             -ms-transform: rotate(-60deg);
  55.             -moz-transform: rotate(-60deg);
  56.             -webkit-transform: rotate(-60deg);
  57.             visibility: visible;
  58.         }
  59.     </style>
  60. </head>
  61. <body>
  62. <div class="boxF">
  63.     <div class="boxS">
  64.         <div class="boxT" style="background-image: url(http://b.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363272bc51737938fa0ec08fac78e.jpg);"></div>
  65.     </div>
  66. </div>
  67. </body>
  68. </html>

八边形比六边形好实现

css3实现六边形的更多相关文章

  1. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  2. css3制作六边形图片

    效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>v ...

  3. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  4. css3 一个六边形 和 放大旋转动画DEMO演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

  5. CSS3—六边形

    整理了2种方法,看完肯定觉得超简单~ 一.旋转型 话不多说先看下需要的样式: 1.transform:rotate(angle) 2.overflow 3.visibility 效果:演示效果,run ...

  6. CSS3 六边形绘制

    把一个104px的div放在它们之间,设置一个背景颜色: width: 0; border-bottom: 30px solid #6C6; border-left: 52px solid trans ...

  7. 第五课 Css3旋转放大属性，正六边形的绘制

    ---恢复内容开始--- 一.效果 二.知识点 1.background-color: rgba(0,0,0,.4);   (红色.绿色.蓝色.透明度(0-1)) 2.position: absolu ...

  8. CSS3六边形

    <!DOCTYPE html> <!-- saved from url=(0043)http://dbox.whosemind.net/demo/liufang.html --> ...

  9. css3.0+html绘制六边形

    <section class="ass_desc"> <section class="ass_descLeft posRe"> < ...

随机推荐

  1. $(document).ready() $(window).load 及js的window.onload

    1.$(document).ready()  简写为$(function(){}) DOM结构绘制完成执行,而无需等到图片或其他媒体下载完毕. 2.$(window).load  在有时候确实我们有需 ...

  2. Unity字体文件放Resources和打成ab对比

    情况一:公共字体打成ab的时候,加载A界面的时候加载了font的ab,卸载A和font的ab后,接着加载B界面,加载了font的ab,卸载B和font的ab,这时候字体对应的asset会在内存里有两份 ...

  3. Nuxt使用element-ui

    废话不多说,在Nuxt中引入Nuxt其实很简单,分下面几步 一.安装element-ui依赖 打开nuxt项目以后,在Terminal中通过 npm i element-ui -S 即可安装eleme ...

  4. pmd 使用笔记

    pmd是一块开源的代码静态分析工具,使用java编写,可以自定义规则来进行自己想要的分析.pmd可以单独使用,也可以作为idea.eclipse的插件使用.它的规则分为xpath规则,和java规则. ...

  5. okhttp 防止自动删除url中的./和../

    测试任意文件读取漏洞是需要在url中加上 ../../ 之类的字符,但是如果使用三方库Apache httpclient或okhttp,他们都会自动删除url中的  ../ ,通过修改okhttp的源 ...

  6. 002-java反编译工具jd-gui

    官网:https://github.com/java-decompiler 下载:https://github.com/java-decompiler/jd-gui/releases 使用: java ...

  7. phoneGap实现离线缓存

    引自:http://www.iteye.com/topic/1128173 正在做一个跨平台的应用,需要使用phonegap进行文件的一些基本操作. 需求如下:可以选择本地图片,或者从相机选择图片,并 ...

  8. JAVA虚拟机(JVM)以及跨平台原理(JDK、JRE、JVM)

    相信大家已经了解到Java具有跨平台的特性,可以“一次编译,到处运行”,在Windows下编写的程序,无需任何修改就可以在Linux下运行,这是C和C++很难做到的. 那么,跨平台是怎样实现的呢?这就 ...

  9. KVM虚拟化安装配置

    一.KVM的基础配置及安装: 1.查看是CPU否支持虚拟化: [root@oldboy-node1 ~]# grep -E "(vmx|svm)" /proc/cpuinfo vm ...

  10. 生于MVP，死于PMF

    本文的主要内容会按照是什么.为什么以及如何做的逻辑展开,主要包括以下几部分: 什么是MVP与PMF: 为什么要有MVP与PMF: 如何创建MVP: 如何验证PMF. 什么是MVP与PMF MVP(Mi ...