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

那么我们把他拆开，就是单个的六边形，如何用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. SpringBoot集成JWT实现权限认证

    目录 一.JWT认证流程 二.SpringBoot整合JWT 三.测试 上一篇文章<一分钟带你了解JWT认证!>介绍了JWT的组成和认证原理,本文将介绍下SpringBoot整合JWT实现 ...

  2. csps模拟测试50反思

    又考崩了,T1一眼秒掉错误思路,然后迅速码完,并码完错误暴力,对拍拍上,以为AC.T2想到了二维莫队,发现是子任务就没去打,一直在想别的,T3最后想到60分打法,没有打完,也没时间暴力,挂掉.T2还有 ...

  3. Android Drawable 简析

    Drawable 是开发中经常用到的一个概念,我们经常用它去设置 View 的背景,背景可以一个颜色值,也可以是一张资源图片,还可以是一个自定义的 Drawable等等.这篇文章就简单说下 Drawa ...

  4. 2. 彤哥说netty系列之IO的五种模型

    你好,我是彤哥,本篇是netty系列的第二篇. 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识. 简介 本文将介绍linux中的五种IO模型,同时也会介绍阻塞/非阻塞与同步/异步的区别. ...

  5. js+jquery 笔记

    本人也不知道该怎么写javascript笔记,本人就拿一个例子来写,这个例子就从算法所说起吧! 例如: 一个整数的数组 [122,393,664,935,1386,1675,1928,2199,247 ...

  6. webpack 打包优化的四种方法（多进程打包，多进程压缩，资源 CDN，动态 polyfill）

    如今,webpack 毫无疑问是前端构建领域里最耀眼的一颗星,无论你前端走哪条路线,都需要有很强的webpack 知识.webpack 的基本用法这里就不展开讲了.主要探讨一下如何提高 webpack ...

  7. tomcat日志（1）

    tomcat日志配置之一自带log 2014-03-19 09:58 33737人阅读 评论(2) 收藏 举报 分类: java(49) 问题 tomcat每次启动时,自动在logs目录下生产以下日志 ...

  8. Groovy单元测试框架spock数据驱动Demo

    spock是一款全能型的单元测试框架. 上次文章分享了spock框架的基础功能的使用,在此基础上,我根据自己写的Groovy的封装方法.数据驱动以及一些Groovy的高级语法做了一些尝试.发现还是有一 ...

  9. redis集群节点重启后恢复

    服务器重启后,集群报错: [root@SHH-HQ-NHS11S nhsuser]# redis-cli -c -h ip -p 7000ip:7000> set cc dd(error) CL ...

  10. js调用浏览器“打印”与“打印预览”

    用到html <object>标签,具体做法如下: 1.在html文档任意位置添加<object>标签: <div style="border: 1px sol ...