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

那么我们把他拆开，就是单个的六边形，如何用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. H5与CSS3常用设置

    1.设置div铺满全屏 对于一个div1,要使其属性height:100%生效,需要使其所有父元素,有确定的属性height.要铺满全屏,就是从html开始,所有的height为100%. 2.垂直居 ...

  2. window10系统下，彻底删除卸载mysql

    本文介绍,在Windows10系统下,如何彻底删除卸载MySQL...1>停止MySQL服务开始->所有应用->Windows管理工具->服务,将MySQL服务停止.2> ...

  3. 带你上手一款下载超 10 万次的 IDEA 插件

    作者 | 倪超(银时) 阿里云开发者工具产品专家 本文整理自 11 月 7 日社群分享,每月 2 场高质量分享,点击加入社群. 导读:Cloud Toolkit 是本地 IDE 插件,帮助开发者更高效 ...

  4. 「Usaco2012 Dec」第一（字典树+拓扑排序）

    (我恨字符串) 惯例化简题目:给定n个字符串,可以改变字符的相对大小(在字典序中的大小),问:字符串i是否能成为最小的字符串(字典序) 解题过程: 首先你可以预处理出来26的全排列然后暴力然后你只要用 ...

  5. 基于代码生成器的快速开发平台 JEECG

    JEECG是一款基于代码生成器的J2EE快速开发平台,开源界“小普元”超越传统商业企业级开发平台.引领新的开发模式(Online Coding模式(在线开发)->代码生成器模式->手工ME ...

  6. 使用Git-Rebase合并多次提交

    在平时的软件开发中,我们每个team使用一个公共仓库(这里说的是Git仓库).每当有一个新的需求,我们会拉出一个特性分支,然后在这个特性分支上做开发以及提交个人的代码. 我有个习惯就是:为了确保代码的 ...

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

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

  8. spark集群搭建（三台虚拟机）——spark集群搭建（5）

    !!!该系列使用三台虚拟机搭建一个完整的spark集群,集群环境如下: virtualBox5.2.Ubuntu14.04.securecrt7.3.6_x64英文版(连接虚拟机) jdk1.7.0. ...

  9. hdu 2554 最短路 (dijkstra)

    最短路Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  10. 搭建Nginx正向代理服务

    需求背景: 前段时间公司因为业务需求需要部署一个正向代理,需要内网服务通过正向代理访问到外网移动端厂商域名通道等效果,之前一直用nginx做四层或者七层的反向代理,正向代理还是第一次配置,配置的过程也 ...