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

那么我们把他拆开，就是单个的六边形，如何用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. [ES]Python查询ES导出数据为Excel

    版本 elasticsearch==5.5.0 python==3.7 说明 用python查询es上存储的状态数据,将查询到的数据用pandas处理成excel code # -*- coding: ...

  2. [考试反思]1025csp-s模拟测试87：生存

    想起一句话 课上求生存,课下求发展 发展还好说,如何生存? 生存很困难... 没什么可抱怨的.有AK的.高分的也很多. 该说的在<Dust>里说完了,安静会吧. 这场rank43怎么追? ...

  3. bzoj1004 card

    明知是burnside然而根本不会然后无耻地颓了题解后一脸傻气的我: 直接套公式???为啥方案数==等价类数量啊??? skyh:显然啊(狂笑)(hey wxy!他问为啥方案书等于等价类数量!) wx ...

  4. jq实现多选框及反选

    1 效果图 2 html <div class="main"> <table> <tr> <th><input type=&q ...

  5. 使用webpack+babel构建ES6语法运行环境

    1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...

  6. NOIP模拟26

    把题解沽了好久了,今天还是不想写,我们靠的B卷其实挺水的,但是我就是想吐槽一下!咋还带题目里面放题解的?题里一点题解的线索都没有,但是玄机竟然在题目里! 我也是醉了,T1就是一个贪心,题目说贪婪,T2 ...

  7. 『题解』洛谷P5015 标题统计

    题意描述 给你一个字符串,求所有字符的总数. 字符只包含数字,大小写字母. 分析 字符串的长度还是\(\le5\)的. 直接枚举就可以了. AC代码: NOIP官方标准程序是这样的 #include ...

  8. SqlServer设置特定用户操作特定表(插入、删除、更新、查询 的权限设置)

    目录 一.需求场景: 二.操作步骤: 表上右键选择[属性],选择[权限]选项卡: 点击[搜索],在弹出的框中点击[浏览],选择需要设置的用户: 在上面点击[确定]后,就可以在[权限]选项卡中看到权限列 ...

  9. sql性能分析（explain关键字）

    explain关键字结果 列名所代表的的含义: Id:MySQL QueryOptimizer 选定的执行计划中查询的序列号.表示查询中执行 select 子句或操作表的顺序,id 值越大优先级越高, ...

  10. PowerMock学习之PoweMock的入门（二）

    前言 在上一篇<PowerMock学习之PoweMock的入门(一)>文章中,已经简单提及一些关于powermock的用法,但是入门还未完,我还要坚持把它学习并坚持更新到博客中. Mock ...