实现原理：
这个效果的主要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代码：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>CSS3 实现六边形图片展示效果</title>

    <style type="text/css">

        body, div, img, ul, li

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            font-size: 12px;

            background-color: #DDD;

            min-width: 1200px;

        }

        ul, ul li

        {

            list-style: none;

        }

        .boxF, .boxS, .boxT, .overlay

        {

            width: 200px;

            height: 250px;

            overflow: hidden;

        }

        .boxF, .boxS

        {

            visibility: hidden;

        }

        .boxF

        {

            transform: rotate(120deg);

            float: left;

            margin-left: 10px;

            -ms-transform: rotate(120deg);

            -moz-transform: rotate(120deg);

            -webkit-transform: rotate(120deg);

        }

        .boxS

        {

            transform: rotate(-60deg);

            -ms-transform: rotate(-60deg);

            -moz-transform: rotate(-60deg);

            -webkit-transform: rotate(-60deg);

        }

        .boxT

        {

            transform: rotate(-60deg);

            background: no-repeat 50% center;

            background-size: 125% auto;

            -ms-transform: rotate(-60deg);

            -moz-transform: rotate(-60deg);

            -webkit-transform: rotate(-60deg);

            visibility: visible;

        }

    </style>

</head>

<body>

<div class="boxF">

    <div class="boxS">

        <div class="boxT" style="background-image: url(http://b.hiphotos.baidu.com/image/pic/item/10dfa9ec8a1363272bc51737938fa0ec08fac78e.jpg);"></div>

    </div>

</div>

</body>

</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. [mysql]清除单表大量数据方法（需保留部分数据）

    大半夜的在删除线上的日志数据,需要清理的大概有1亿八千万条...任务艰巨. 毕业前没学过数据库,所以对于如何清理大量数据还真一时不知道该怎么办才好.刚开始确实想过对表进行重命名的方式来处理,不过当时因 ...

  2. Bootstrap学习-其它内置组件

    1.缩略图(一) 缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题.描述等信息.Bootstrap框架将这一部独立成一个模块组件.并通过“thumbn ...

  3. Wireshark网络分析工具（一）

    关于Wireshark,熟悉网络或网络性能方面的同学应该知道,使用Wireshark工具通过抓取数据包,对系统网络问题进行分析,该工具简单.易用.易学! 百度百科上面是这样描述的:Wireshark( ...

  4. 1.Configure the mongo Shell-官方文档摘录

    Customize the Prompt 自定义提示 You may modify the content of the prompt by setting the variable prompt i ...

  5. nodejs开发的example或学习文档

    nodejs开发一般使用webstorm作为ide. 还有个叫Cloud 9的云编辑器. webstorm注册网址: http://idea.lanyus.com/ http://amirrajan. ...

  6. Nginx配置参数说明

    一.主配置段1.正常运行必备的配置#运行用户和组,组身份可以省略user nginx nginx; #指定nginx守护进程的pid文件pid path/to/nginx.pid; #指定所有work ...

  7. JAVA 遍历文件夹下文件并更改文件名称

    周末因为一些原因,需要批量更改一些文件的名称,使其随机,就随手写了点代码. 增加一个随机字母: public static void changeName(String path){ File fil ...

  8. 010_Hadoop配置测试成功后关机重启浏览器打不开dfs和MP

    针对Hadoop成功配置并测试通过,第二次(关机重启)后Hadoop打不开的问题,一般都是因为防火墙的问题,将防火墙关闭后就可以了. 更细致的现象为start-all.sh启动,五大守护进程启动成功, ...

  9. Linux Shell基础 环境变量

    环境变量 环境变量和用户自定义变量最主要的区别在于,环境变量是全局变量,而用户自定义变量是局部变量.用户自定义变量只在当前的 Shell 中生效,而环境变量会在当前 Shell 和这个 Shell 的 ...

  10. 验证——正则<37>

    1,郵箱合法性驗證 /* * 郵箱合法性驗證 * @method matchTel * @papram{string} str,電子郵箱 * @return{boolean} * */ functio ...