css3实现六边形

实现原理：
这个效果的主要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实现六边形的更多相关文章

CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
css3制作六边形图片
效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>v ...
CSS3 实现六边形Div图片展示效果
原文:CSS3 实现六边形Div图片展示效果效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...
css3 一个六边形和放大旋转动画DEMO演示
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...
CSS3—六边形
整理了2种方法,看完肯定觉得超简单~ 一.旋转型话不多说先看下需要的样式: 1.transform:rotate(angle) 2.overflow 3.visibility 效果:演示效果,run ...
CSS3 六边形绘制
把一个104px的div放在它们之间,设置一个背景颜色: width: 0; border-bottom: 30px solid #6C6; border-left: 52px solid trans ...
第五课 Css3旋转放大属性，正六边形的绘制
---恢复内容开始--- 一.效果二.知识点 1.background-color: rgba(0,0,0,.4); (红色.绿色.蓝色.透明度(0-1)) 2.position: absolu ...
CSS3六边形
<!DOCTYPE html>  ...
css3.0+html绘制六边形
<section class="ass_desc"> <section class="ass_descLeft posRe"> < ...

随机推荐

PHP 获得域控内用户的计算机登录名
一个需求: 在域控范围获得访问用户的计算机名.方法: 1．测试软件环境: XAMPP Control Panel V3.2.1 , Apache version 2.4.7 2．Apache 2.2 ...
el-tree 设置目录树中的某个节点为高亮状态
现在可以实现,点击某个节点,该节点会红色高亮,那怎么让这个树加载出来的时候默认某个节点高亮呢?element ui里面带勾选框的可以默认勾选上,这个没有勾选框其实很简单.element ui的树形 ...
ActiveMQ 核心概念
1.Failover 当A无法为客户服务时,系统能够自动地切换,使B能够及时地顶上继续为客户提供服务,且客户感觉不到这个为他提供服务的对象已经更换. 如数据库.应用服务.硬件设备等的失效转移. 2.S ...
json & pickle & shelve 模块
JSON表示的对象就是标准的JavaScript语言的对象,JSON和Python内置的数据类型对应如下: # json序列化 import json,time user={'name':'egon' ...
Python定时执行脚本
最近测试hbase,老发现服务挂掉,自己不能及时发现,想了想,写了个脚本,让脚本每个小时执行一次,以便检测是否有服务挂掉,如果有服务挂掉,及时启动 import os import datetime ...
找出n的阶乘末尾有几个零
原理:因为10由2*5组成,而构成2的因数比5多所以最终转换成求5的个数 int getNumber(int n) { int count = 0; while(n) { n = n/5; coun ...
HAProxy安装及简单配置
一.HAProxy简介代理的作用:web缓存(加速).反向代理.内容路由(根据流量及内容类型等将请求转发至特定服务器).转码器(将后端服务器的内容压缩后传输给client端).缓存的作用:减少冗余内 ...
TCP/IP/UDP 协议
互连网早期的时候,主机间的互连使用的是NCP协议.这种协议本身有很多缺陷,如:不能互连不同的主机,不能互连不同的操作系统,没有纠错功能.为了改善这种缺点,大牛弄出了TCP/IP协议.现在几乎所有的操作 ...
rar 7z文件打包
把D:\file目录下的所有东西打包为file.rar放到D:\目录下, Rar.exe是放在c盘根目录下 >>C:\Rar.exe a -k -r -s -m1 D:\file.rar ...
C#将图片白色背景设置为透明
Image image = System.Drawing.Image.FromFile(@"C:\A.JPG"); Bitmap pbitmap = new Bitmap(imag ...

css3实现六边形

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

随机推荐

热门专题