css如何实现六边形图片 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下css如何实现六边形图片,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

先上效果:

在此处,我设置了外层容器宽为190 px,高为110 px,然后设置背景图片。代码如下

效果就是一张图

css如何实现六边形图片

(2)第二步,绘制左侧div及其伪元素图片

这一步,利用新div定位旋转拼合六边形的左侧,并给新div的伪元素设置宽高并设置与上图一致的背景图片,注意新div伪元素的宽高为整个六边形的宽高。然后旋转伪元素使图片垂直显示(应为新div旋转了,所以伪元素图片也被旋转,所以需要反向旋转回正常角度),而且还要调整伪元素位置(新div旋转了,影响伪元素定位位置),最后给这个新div设置超出隐藏,六边形左边就绘制好了

& lt; ! DOCTYPE html> 　　& lt; html lang=癳n"祝辞　　& lt; head> 　　,,,& lt; meta charset=癠TF-8"比; 　　,,,& lt; title> Document 　　& lt;/head> 　　& lt; style> 　　,,,.wrap { 　　,,,,,,,身高:110 px; 　　,,,,,,,宽度:,190 px; 　　,,,,,,,位置:,相对; 　　,,,,,,,保证金:,200 px 汽车; 　　,,,,,,,背景:,url (& # 39;。/eddie.jpg& # 39;), 50%, 50%,没有重演,, 　　,,,,,,,background-size:, auto 220 px; 　　,,,} 　　,,,.common { 　　,,,,,,,位置:,绝对; 　　,,,,,,,身高:,100%; 　　,,,,,,,宽度:,100%; 　　,,,,,,,溢出:,隐藏; 　　,,,,,,,左:0; 　　23日, 　　,,,} 　　,,,.common:{之前　　,,,,,,,内容:& # 39;& # 39;; 　　,,,,,,,位置:,绝对; 　　,,,,,,,背景:url (& # 39;。/eddie.jpg& # 39;), 50%, 50%,不再重演; 　　,,,,,,,background-size:, auto 220 px; 　　,,,,,,,宽度:,190 px; 　　,,,,,,,身高:,220 px; 　　,,,} 　　,,,.left { 　　,,,,,,,变换:,旋转(60度); 　　,,,} 　　,,,.left:{之前　　,,,,,,,变换:,旋转(-60度),翻译(48 px, -28 px); 　　,,,} 　　& lt;/style> 　　& lt; body> 　　,,,& lt; div 类=& # 39;包# 39;比; 　　,,,,,,,& lt; div 类=& # 39;left 常见# 39;祝辞& lt;/div> 　　,,,, 　　,,,& lt;/div> 　　& lt;/body> 　　& lt;/html>

效果如下:

css如何实现六边形图片

(3)第三步,绘制右侧div及其伪元素图片

这步原理和第二部一样,只不过角度反过来了,所以就不赘述,直接上完整代码

& lt; ! DOCTYPE html> 　　& lt; html lang=癳n"祝辞　　& lt; head> 　　,,,& lt; meta charset=癠TF-8"比; 　　,,,& lt; title> Document 　　& lt;/head> 　　& lt; style> 　　,,,.wrap { 　　,,,,,,,身高:110 px; 　　,,,,,,,宽度:,190 px; 　　,,,,,,,位置:,相对; 　　,,,,,,,保证金:,200 px 汽车; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null