css3六边形平铺

.hex_top_triangle{
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex_center_rect{
    width: 104px;
    height: 60px;
    background-color: #6C6;
}
.hex_bottom_triangle{
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.float{
    float:left;
    margin-left:1px;
    margin-bottom: -29px;
}
.row_even{
    clear: left;
    margin-left:52px;
   /* margin-top:30px;*/
}
.hex_even{
    float:left;
    margin-left:1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="hex.css" type="text/css" rel="stylesheet"/>
<body>
<div>
    <div class="float">
        <div class="hex_top_triangle"></div>
        <div class="hex_center_rect"></div>
        <div class="hex_bottom_triangle"></div>
    </div>
    <div class="float">
        <div class="hex_top_triangle"></div>
        <div class="hex_center_rect"></div>
        <div class="hex_bottom_triangle"></div>
    </div>
    <div class="float">
        <div class="hex_top_triangle"></div>
        <div class="hex_center_rect"></div>
        <div class="hex_bottom_triangle"></div>
    </div>
</div>
<div class="row_even">
    <div class="hex_even">
        <div class="hex_top_triangle"></div>
        <div class="hex_center_rect"></div>
        <div class="hex_bottom_triangle"></div>
    </div>
    <div class="hex_even">
        <div class="hex_top_triangle"></div>
        <div class="hex_center_rect"></div>
        <div class="hex_bottom_triangle"></div>
    </div>
</div>
</body>
</html>

对蜂窝状的排版结构的模仿半成品,从简单的规律演化出缤纷的效果来。深入了对css的理解,可以做出简单的六边形之后难点就变成了,如何将这些简单的六边形排版,我的第一感是将一个六边形放入div中然后通过变形什么的实现,可惜自己思考力不够,中途放弃,参考成熟的代码通过div的排列,clear:left 清除左边的浮动,实现了浮动元素的换行,另外margin-bottom:-30px;为了使六边形向上的尖角插入,的二行整体左移对应的像素。

时间: 2024-10-09 18:07:45

css3六边形平铺的相关文章

随机三角形平铺布局算法(iOS实现)

你是否已经看够iOS里默认给出的那些方方正正的块状和规规矩矩的陈列? 本篇给出一种随机三角形平铺布局的算法设计和实现.这种布局在规矩与随机之间做了折中,使其看上去有新鲜感又不会很乱. 本次实现重点在于布局算法的设计和实现,可以改变颜色或者添加图片. 最新源代码下载地址:https://github.com/duzixi/Varied-Layouts(持续维护,欢迎互粉) 博文首发地址:http://blog.csdn.net/duzixi 布局生成效果如下:         核心算法设计以及代码

android 图片水平重复平铺(repeat x)

<=用来重复显示的图 1.最简单方式 创建wave_repeat.xml <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@drawable/wave" android:tileMode="repeat&q

#金码坊AOS开发平台# 增加了用户自定义快捷菜单在平铺布局下的用户自定义排序管理

#AOS开发平台# 增加了用户自定义快捷菜单在平铺布局下的用户自定义排序管理.

平铺导航——基于分屏导航的实现(IOS开发)

导航模式 -平铺导航:内容没有层次关系,其实就在一个主屏幕上,只是采用分屏分页控制器来导航,可以左右上下滑动屏幕查看内容.(如:系统自带的天气) -标签导航:内容被分割几个功能模块,但这些功能实际上没有任何关系.通过标签管理.标签应用太多太多了... -树形导航:有层次,从上到下细分为或者为包含的关系.(如:邮箱) 这几个经常组合起来一起使用. 这里主要讲平铺导航. 用到的控件为分屏控件(UIPageControl)和滚动视图控件(ScrollView),在这个过程中我们可能确实新建了许多Vie

如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕(自适应大小)

默认情况下,通过HTML代码的BODY标签设置好背景图片<body background="x.jpg"> 后,图片会自动横向和纵向平铺.这就会产生一些美观上的问题. XP人提供CSS代码如下,放在页面头部即可,仅供参考: <style type="text/css"> body { background:url(/img/background.png); background-repeat: repeat-x; background-pos

Android: 背景图片平铺要这么干

<?xml version="1.0" encoding="utf-8"?>  <bitmap xmlns:android="http://schemas.android.com/apk/res/android"    android:src="@drawable/bg_header"      android:tileMode="repeat" >  </bitmap>

libgdx学习记录11——平铺地图TiledMap

地图对于游戏场景十分重要,很多游戏都需要对地图进行编辑,可使用TileMap进行编辑并生成对应的tmx格式地图文件. 编辑好后,可通过TmxMapLoader来读取地图文件.可通过一个正交相机OthographicCamera和正交地图渲染器OrthogonalTiledMapRenderer来进行显示. 实例如下: 1 package com.fxb.newtest; 2 3 import com.badlogic.gdx.ApplicationAdapter; 4 import com.ba

69、Android 布局中轻松实现图片的全屏、居中、平铺

public void paint() { if (item.laying_mode != 1)//平铺或者充满 { new AsyncTask<Void, Void, Void>() { @Override protected Void doInBackground(Void... params) { Looper.prepare(); try { theBitmap = Glide. with(ctxt). load(item.src). asBitmap(). into(fenbianl

Canvas 图片平铺设置

/** * 图片平铺 */ function initDemo7(){ var canvas = document.getElementById("demo7"); if (!canvas) return; var context = canvas.getContext("2d"); var type = [ "no-repeat", // 不平铺 "repeat-x", // 横向平铺 "repeat-y"