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 ...
随机推荐
- Web 前端最佳实践
Web 最佳实践 前端 选择器 尽量使用ID选择器 基于Id的选择器:先使用ID选择器定位,然后再使用find方法精确查找 // Fast: $( "#container div ...
- 咏南DATASNAP中间件提供免费使用了
咏南DATASNAP中间件提供免费使用了. 百度网盘分享: 链接: http://pan.baidu.com/s/1c06Ivp2 密码: dhhm
- HDU 3966 Aragorn's Story (树链点权剖分,成段修改单点查询)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3966 树链剖分的模版,成段更新单点查询.熟悉线段树的成段更新的话就小case啦. //树链剖分 边权修 ...
- Codeforces Round #349 (Div. 2) D. World Tour (最短路)
题目链接:http://codeforces.com/contest/667/problem/D 给你一个有向图,dis[i][j]表示i到j的最短路,让你求dis[u][i] + dis[i][j] ...
- json网页预览插件
- How to Be Good at Mathematics
How to Be Good at Mathematics Community Q&A Sometimes, the hardest subject for some people is ma ...
- 看京东如何把Intel RealSense技术用在物流上
提起Intel RealSense 3D 深度摄像头,总是离不开无人机.机器人等前沿硬件产品,比如 CES 2016 上让人眼前一亮的自动避障无人机Yuneec “台风 H”,Segway.Nineb ...
- 通过注册表查看已安装 .NetFramework 版本
gci "hklm:\SOFTWARE\Microsoft\NET Framework Setup\NDP" | % {(Get-ItemProperty registry::$_ ...
- delphi 获取 TreeView选中的文件路径
//获取 TreeView选中的文件路径 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, G ...
- [Ramda] Basic Curry with Ramda
var _ = R; /***************************************** C U R R Y I N G E X A M P L E **************** ...