在平时的页面布局中，我们也会经常碰到蜂窝煤类型的模块：

那么我们把他拆开，就是单个的六边形，如何用css去实现一个六边形呢？下面是我用绘图软件绘制的css实现六边形的步骤：

具体的html代码如下：

<!DOCTYPE html>

<html>

    <head>

　　　　<meta charset="UTF-8">

　　　　<title></title>

　　　　<style type="text/css">

　　　　　　.list{

　　　　　　　　width: 200px;

　　　　　　　　height: 250px;

　　　　　　　　overflow: hidden;

　　　　　　　　transform: rotate(120deg);

　　　　　　　　margin: 200px;

　　　　　　}

　　　　　　.list_child{

　　　　　　　　width: 100%;

　　　　　　　　height: 100%;

　　　　　　　　overflow: hidden;

　　　　　　　　transform: rotate(-60deg);

　　　　　　}

　　　　　　.list_child_child{

	　　　　width: 100%;

	　　　　height: 100%;

	　　　　overflow: hidden;

	　　　　transform: rotate(-60deg);

	　　　　background-color: red;

　　　　　　}

　　　　</style>

　　</head>

　　<body>

　　　　<div class="list">

　　　　　　<div class="list_child">

　　　　　　　　<div class="list_child_child"></div>

　　　　　　</div>

　　　　</div>

　　</body>

</html>

　　

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

  1. 大前端的自动化工厂（2）—— SB Family

    原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f 我坦白我是标题党,SB只是SCSS-Bourbon的简写 ...

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  4. css绘制六边形

    CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: <div id="box1">< ...

  5. 纯CSS实现蜂窝六边形的个性相册

    概述 纯CSS实现蜂窝六边形的个性相册 详细 代码下载:http://www.demodashi.com/demo/12804.html 此案例主要用到CSS3的 transform 和 transi ...

  6. web前端css实现六边形效果

    css六边形边框 第一步.分解图形 拆分成一个长方形和两个正方形 三角形是正方形的一半 用伪元素实现一个正方形 旋转45度(transform:rotate(45deg)) 等腰直角三角形是特殊的等腰 ...

  7. 如何用 CSS 和 D3 创作一个无尽的六边形空间

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/NBvrWL 可交互视频 此视频是可 ...

  8. 使用css绘制六边形

    用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: 接下来,就是代码了: CSS: ;;border-top: 30px solid #6c6;border-left:  ...

  9. css实现六边形图片（最简单易懂方法实现高逼格图片展示）

    不说别的,先上效果: 用简单的div配合伪元素,即可‘画出’这幅六边形图片,原理是三个相同宽高的div,通过定位旋转拼合成一个六边形,再利用背景图层叠,形成视觉上的一张整图.下面咱们一步一步来实现. ...

随机推荐

  1. 从《国产凌凌漆》看到《头号玩家》，你就能全面了解5G

    2019 年 9 月,移动.联通.电信5G套餐预约总和已突破 1000 万.2019 年 11 月,三大电信运营商将在全国范围内提供携号转网服务.2019 年内,移动将建立 5 万个 5G 基站,联通 ...

  2. 安装实时查看日志工具 log.io

    官网:http://logio.org/ 一.环境 [root@centos ~]# cat /etc/system-release CentOS release 6.5 (Final) [root@ ...

  3. DOS打印目录树到文件

    tree /f >>tree.txt 卷 数据 的文件夹 PATH 列表 卷序列号为 -FBAE E:. └─mysite │ manage.py │ └─mysite settings. ...

  4. NOIP模拟 5

    考试的时候相当浮躁,而且脑子并不工作 T1看了几眼,觉得没思路,先skip T2一打眼,满足条件的最大值,二分!(然后就死了,根本没想有没有单调性) T3找了半天规律,一开始自己手模的K3都过不了样例 ...

  5. 【IOS开发—视图控制器】

    一.UIViewController 视图控制器是UIViewController类或者其子类对象,每个视图控制器都负责管理一个视图层次结构.在UIViewController中有一个重要的UIVie ...

  6. Project Euler 51: Prime digit replacements

    通过替换*3这样一个两位数的第一位,我们可以发现形成的九个数字有六个是质数,即13, 23,43,53,73,83.类似的,如果我们用同样的数字替换56**3这样一个五位数的第三位和第四位,会生成56 ...

  7. css3的过渡和动画的属性介绍

    一.过渡 什么是过渡? 过渡是指:某元素的css属性值在一段时间内,平滑过渡到另外一个值,过渡主要观察的是过程和结果. 设置能够过渡的属性: 支持过渡的样式属性,颜色的属性,取值为数值,transfo ...

  8. MySQL数据库的10大经典错误案例

    学习任何一门技术的同时,其实就是自我修炼的过程.沉下心,尝试去拥抱数据的世界! 案例一 Too many connections (连接数过多,导致连接不上数据库,业务无法正常进行) 问题还原: 解决 ...

  9. Redis单节点数据同步到Redis集群

    一:Redis集群环境准备 1:需要先安装好Redis集群环境并配置好集群 192.168.0.113 7001-7003 192.168.0.162 7004-7006 2:检查redis集群 [r ...

  10. Netty创建服务器与客户端

    Netty 创建Server服务端 Netty创建全部都是实现自AbstractBootstrap.客户端的是Bootstrap,服务端的则是ServerBootstrap. 创建一个 HelloSe ...