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

那么我们把他拆开，就是单个的六边形，如何用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. [考试反思]1024csp-s模拟测试85：以为

    愈发垃圾. T1基本全场切(除了RP<-inf的zkt和把人擦) 然后T2想了半天逐渐趋近于正解,但是因为数据有问题锅了25分,没什么好说的.T3连题意转化都没有完成.括号匹配转为+1/-1做法 ...

  2. curl太复杂难用记不住?来试试Httpie一个简单的现代化命令行Http客户端

    HTTPie 是一个简单的现代化命令行 HTTP 客户端. 交互友好,JSON支持,语法高亮,类wget下载,支持拓展等 功能特性 自然而且简单的命令语句 格式化且高亮显示输出内容 内置 JSON 支 ...

  3. [ PyQt入门教程 ] PyQt5中数据表格控件QTableWidget使用方法

    如果你想让你开发的PyQt5工具展示的数据显得整齐.美观.好看,显得符合你的气质,可以考虑使用QTableWidget控件.之前一直使用的是textBrowser文本框控件,数据展示还是不太美观.其中 ...

  4. Spring注解之@RestControllerAdvice

    前言 前段时间部门搭建新系统,需要出异常后统一接口的返回格式,于是用到了Spring的注解@RestControllerAdvice.现在把此注解的用法总结一下. 用法 首先定义返回对象Respons ...

  5. 实验：基于http的yum源

    实验:基于http的yum源 selinux,firewalld已经关闭',系统为CentOS7 repodata所在的目录就是yum源 下面介绍了如何把本地光盘通过httpd服务器变成yum源:多个 ...

  6. java多线程与线程并发五：多个线程访问共享对象和数据的方式

    本节的内容主要是对前面几节提到的线程间共享数据的方式做一个总结. 线程之间共享数据有以下几种方式: 1.如果每个线程执行的代码相同,可以使用同一个Runnable对象. 2.如果每个线程执行的代码不同 ...

  7. 网站搭建 - 虚拟机的安装 - Linux 本地网站搭建第一步

    搭建网站-1-域名申请参见公众号 生物信息系统(swxxxt) 搭建网站-域名绑定见稍后的一章,就是直接点解析,然后就完事了,可以不看的. 首先准备材料: 先装虚拟机,会要求重启,那就重启吧,安装界面 ...

  8. [LC]35题 Search Insert Position （搜索插入位置）

    ①英文题目 Given a sorted array and a target value, return the index if the target is found. If not, retu ...

  9. Python 常用模块系列（2）--time module and datatime module

    import time print (help(time)) #time帮助文档 1. time模块--三种时间表现形式: 1° 时间戳--如:time.time()  #从python创立以来,到当 ...

  10. ubunit 16 安装pip

    pip是一个用来安装和管理python包的工具.已经内置到python2.7.9和python3.4及其以上的版本里. python2.7执行: sudo apt-get install python ...