CSS3—六边形
整理了2种方法,看完肯定觉得超简单~
一、旋转型
话不多说先看下需要的样式:
2.overflow
html结构:
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p>为所欲为为所欲为</p>
</div>
</div>
</div>
</body>
3层div,结构是不是很简单~接下来要怎么旋转呢?
为了方便理解加了背景
box1:红色
box2:黑色
box3:粉色
1.box1旋转120°,box2旋转-60°,box3再旋转-60°,我们的内容放在box3中。
2.经过旋转肯定有超出的部分,对3个div都设置overflow:hidden。
3.box1,box2是用来旋转得到6边形的,所以对他们设置visibility: hidden,box3放内容,需显示,因此设置visibility: visible。
(如果不对box3设置visibility: visible;它会继承box2的visibility: hidden; )
注意div的宽高不要相等,不然得到的就不是6边形咯。
经过旋转和对超出部分的隐藏就得到我们想要的6边形了,所有代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3—六边形</title>
<style type="text/css">
.box1, .box2, .box3
{
width: 200px;
height: 250px;
overflow: hidden;
}
.box1, .box2
{
visibility: hidden;
}
.box1
{
transform: rotate(120deg);
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.box2
{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.box3
{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
background-color:pink;
visibility: visible;
}
.box3 p{
color: yellow;
font-size: 22px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p>为所欲为为所欲为</p>
</div>
</div>
</div>
</body>
</html>
二、拼接型
很明显2个三角形加1个矩形,是不是很简单~
三角形请看上一篇:CSS3—三角形
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css—六边形2</title>
<style>
.triangleb{
width:0;
height:0;
border-top:0px solid transparent;
border-right:60px solid transparent;
border-bottom:40px solid pink;
border-left:60px solid transparent;
}
.trianglet{
width:0;
height:0;
border-top:40px solid pink;
border-right:60px solid transparent;
border-bottom:0px solid transparent;
border-left:60px solid transparent;
}
.box{
width: 120px;
height: 65px;
background-color: pink;
}
</style>
</head>
<body>
<div class="triangleb"></div>
<div class="box"></div>
<div class="trianglet"></div>
</body>
</html>
博客园:CSS3—六边形
CSS3—六边形的更多相关文章
- CSS3 六边形绘制
把一个104px的div放在它们之间,设置一个背景颜色: width: 0; border-bottom: 30px solid #6C6; border-left: 52px solid trans ...
- CSS3六边形
<!DOCTYPE html> <!-- saved from url=(0043)http://dbox.whosemind.net/demo/liufang.html --> ...
- CSS3 画基本图形,圆形、椭圆形、三角形等
CSS3圆角#css3-circle{ width: 150px; height: 150px; border-radius: 50%; }CSS3 椭圆形css3 radius#css3-elips ...
- CSS3 实现圆形、椭圆形、三角形等各种形状样式
CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- css3制作六边形图片
效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>v ...
- CSS3 实现六边形Div图片展示效果
原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...
- css3实现六边形
实现原理:这个效果的主要css样式有:1.>transform: rotate(120deg); 图片旋转2.>overflow:hidden; 超出隐藏3.>visibility: ...
- 第五课 Css3旋转放大属性,正六边形的绘制
---恢复内容开始--- 一.效果 二.知识点 1.background-color: rgba(0,0,0,.4); (红色.绿色.蓝色.透明度(0-1)) 2.position: absolu ...
随机推荐
- thymeleaf中的th:with用法
局部变量,th:with能定义局部变量: <div th:with="firstPer=${persons[0]}"> <p> The name of th ...
- C# 索引器 学习
转载原地址: http://www.cnblogs.com/lxblog/p/3940261.html 1.索引器(Indexer): 索引器允许类或者结构的实例按照与数组相同的方式进行索引.索引器类 ...
- 学习微软中间语言(MSIL)的绝佳工具 Dotnet IL Editor 推荐
Dotnet IL Editor是一款.NET平台反编译工具,可以反编译.NET程序集文件为IL代码,并且可以执行,调试反编译后生成的IL代码.它的设计出发点比较直观,新建一个项目,添加程序集文件,设 ...
- ObjC-观察者模式
观察者模式是设计模式的一种,又称为发布者/订阅者模式,其定义了一种一对多的关系,多个观察者可以监听一个对象.当该对象的状态发生改变时,会通知所有的观察者,观察者会自己进行更新. 观察者模式能够将观察者 ...
- 栈的应用2——超级计算器(中缀与后缀表达式)C语言
输入中缀表达式输出结果(结果可以是小数,但输入必须是整数) #include<stdio.h> #include<stdlib.h> //需要两个栈,一个储存结果,一个储存运 ...
- ADO.NET 快速入门(三):从存储过程获取输出参数
一些存储过程通过参数返回值.当参数在SQL表达式或者存储过程中被定义为“输出”,参数值会返回给调用者.返回值存储在 OleDbCommand 或者 SqlCommand 对象的参数集合的参数里. ...
- Java中单例设计模式总结
两种单例常见的实现方式: 1:懒汉的设计模式,在第一次调用的时候才完成相关的初始化操作 懒汉式是典型的时间换空间,就是每次获取实例都会进行判断,看是否需要创建实例,浪费判断的时间.当然,如果一直没有人 ...
- zookeeper的C#Client
最近在搭一套soa, 服务使用java/scala 的finagle 协议使用thrift 然后 finagle默认服务端会是使用zookeeper作为节点存储.. 所以想要访问具体服务,需要先通过 ...
- 杭电 2034 人见人爱A-B
http://acm.hdu.edu.cn/showproblem.php?pid=2034 人见人爱A-B Time Limit: 2000/1000 MS (Java/Others) Mem ...
- C/C++程序猿必须熟练应用的开源项目
作为一个经验丰富的C/C++程序猿, 肯定亲手写过各种功能的代码, 比方封装过数据库訪问的类, 封装过网络通信的类,封装过日志操作的类, 封装过文件訪问的类, 封装过UI界面库等, 也在实际的项目中应 ...