python 六边形架构_通过纯css3代码实现六边形边框

最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度，此时刚好回正，然后把图片就放在第3层的div背景中。因为前两层div中没有东西，纯粹就是用来旋转得到6边形的，所以对1，2层div设置 visibility: hidden ; 而第3层div是放图片的，需要显示出来，因此设置 visibility: visible;

经过旋转肯定有超出的部分，因此对3个div都设置 overflow:hidden; 经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。

注意：

如果不对第3层div设置 visibility: visible; 那它默认就会继承第二层div(boxS)的 visibility: hidden;

div的宽高比例必须满足4：5，不然得到的就不是六边形了。

实现原理：

transform: rotate(120deg); 图片旋转

overflow:hidden; 超出隐藏

visibility: hidden; 也是隐藏，与 display:none; 相似，但不同的是，它虽然隐藏了，但依然会在网页中占有位置

实现代码：

HTML代码

CSS代码

.boxF,

.boxS,

.boxT,

.overlay {

width: 200px;

height: 250px;

overflow: hidden;

}

.boxF,

.boxS {

visibility: hidden;

}

.boxF {

transform: rotate(120deg);

float: left;

margin-left: 10px;

-ms-transform: rotate(120deg);

-moz-transform: rotate(120deg);

-webkit-transform: rotate(120deg);

}

.boxS {

transform: rotate(-60deg);

-ms-transform: rotate(-60deg);

-moz-transform: rotate(-60deg);

-webkit-transform: rotate(-60deg);

}

.boxT {

transform: rotate(-60deg);

background: no-repeat 50% center;

background-size: 125% auto;

-ms-transform: rotate(-60deg);

-moz-transform: rotate(-60deg);

-webkit-transform: rotate(-60deg);

visibility: visible;

}

教程转自：https://www.cnblogs.com/wwlhome/p/5970442.html

python 六边形架构_通过纯css3代码实现六边形边框相关推荐

网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
css3直线运动_用纯CSS3制作的效果非常炫酷的元素边框线条动画特效
插件描述:这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条动画特效.这个元素边框线条动画使用伪元素和keyframes来制作线条运动效果. 这是一款使用纯CSS3制作的效果非常炫酷的元素边框线条 ...
html5用css做样式边框,纯CSS3实现自定义Tooltip边框涂鸦风格
本文作者html5tricks,转载请注明出处这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用C ...
纯CSS3动画实现SVG边框特效
效果展示源码展示 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
纯css自动全屏轮播图html代码,纯CSS3代码实现简单的图片轮播
以4张图片为例: 1.基本布局: 将4张图片左浮动横向并排放入一个div容器内,图片设置统一尺寸,div宽度设置4个图片的总尺寸,然后放入相框容器div, 相框设置1个图片的大小并设置溢出隐藏,以保证 ...
python 随机名言_如何用简易代码自动生成经典语录
"不要空想不可能的事情" "增加自己的幸福感" "我们最终将创造地面,并呵护它" "保持希望并学会放弃奇迹" 上面所有引 ...
cad和python哪个好学_对纯外行人来说，学习PS和Python哪个更容易？
果真是高手大隐隐于市,我如此隐藏都被你看出来了,谢邀回答!然后你看出了吧!答案在我这里很明显,当然是学习ps更容易一点,至于Python我的天分实在是太渣,所以,至今我敢不敢承认我学过.既然都被召唤出 ...
python判断回文序列_怎么用python3代码检查回文序列？
说到回文这个词还是要从以前所学的讲起,最简单的理解就是后面句子的开头和上一句的结尾重复,所以形成回文的关系.理解了这个词后,那么接下来我们要讲的回文序列相信就难不倒小伙伴们了.今天我们以大家熟知的字符 ...
python 英语分词_用几十行代码实现python中英文分词
说到分词大家肯定一般认为是很高深的技术,但是今天作者用短短几十行代码就搞定了,感叹python很强大啊!作者也很强大.不过这个只是正向最大匹配,没有机器学习能力注意:使用前先要下载搜狗词库# -*- ...

python 六边形架构_通过纯css3代码实现六边形边框

python 六边形架构_通过纯css3代码实现六边形边框相关推荐

最新文章

热门文章