热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css怎么设置图片为六边形

css设置图片为六边形的方法:首先创建一个HTML示例文件;然后在body中引入图片;最后通过“transform:rotate(120deg);overflow:hidden;”等css样式实现图片为六边形即可。

css设置图片为六边形的方法:首先创建一个HTML示例文件;然后在body中引入图片;最后通过“transform: rotate(120deg);overflow: hidden;”等css样式实现图片为六边形即可。

二. 原理讲解

这个效果用到的主要知识点 :

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

  2. overflow: hidden; 超出隐藏

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

  我们要用到3层p进行旋转来得到这个效果(注: 3层 p 的大小是一样的)。最外层 p(boxF) 旋转120度,第二层 (boxS) 旋转-60度,第三层 (boxT) 再旋转-60度,此时刚好回正。我们的图片就放在第3层的 p 背景中。因为前两层 p 中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层 p 设置 visibility: hidden; 而第3层 p 是放图片的,需要显示出来,因此设置 visibility: visible; (注: 如果你不对第3层 p 设置 visibility: visible; 那它默认就会继承第二层 p(boxS) 的 visibility: hidden; )。经过旋转肯定有超出的部分,因此对3个p都设置 overflow:hidden;

  经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意,那就是p的宽高比例必须满足4:5,不然得到的就不是6边形了。在上面的效果图片中。我们在第三层 (boxT) 里面还放置了一个 p(overlay),这个 p 是用于遮罩的,当鼠标移到6边形上时,会有遮罩效果。在 p(overlay) 里面有个a标签,里面是个 + 号,点击 a 标签则弹出层,显示大图(注: 这个 js 效果暂时没写)。

三. 上面效果图的DEMO代码【推荐:《css视频教程》】

    
    
    
    

+

+

+

+

+

-- 想看效果,直接将DEMO代码复制就行了,当然,图片得你自己加了,IE9以下版本不支持。

以上就是css 怎么设置图片为六边形的详细内容,更多请关注其它相关文章!


推荐阅读
  • 本文深入探讨了HTML5中十五个重要的新特性,为开发者提供了详细的指南。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 本文详细介绍了如何使用 CSS3 的 background-clip 和 background-origin 属性来裁剪和定位背景图片,以及如何通过 background-size 控制背景图片的尺寸。 ... [详细]
  • 开发笔记:前端之前端初识
    开发笔记:前端之前端初识 ... [详细]
  • 拖拉切割直线 ... [详细]
  • 使用CSS与HTML构建动态图片墙
    本文介绍如何利用CSS和HTML创建一个动态响应的图片墙,特别适合在Firefox和Chrome浏览器中查看。通过简单的鼠标交互,用户可以放大浏览图片。 ... [详细]
  • 本文面向非计算机专业背景的编程爱好者,介绍如何仅使用基础的C语言知识——二维数组和结构体,无需掌握复杂的数据结构如链表,即可编写一款经典的贪食蛇游戏。通过本教程,您将了解游戏开发的基本原理和实现方法。 ... [详细]
  • Python中调用Java代码的方法与实践
    本文探讨了如何在Python环境中集成并调用Java代码,通过具体的步骤和示例展示了这一过程的技术细节。适合对跨语言编程感兴趣的开发者阅读。 ... [详细]
  • 本文详细介绍了在PHP中如何获取和处理HTTP头部信息,包括通过cURL获取请求头信息、使用header函数发送响应头以及获取客户端HTTP头部的方法。同时,还探讨了PHP中$_SERVER变量的使用,以获取客户端和服务器的相关信息。 ... [详细]
  • 本文探讨了互联网服务提供商(ISP)如何可能篡改或插入用户请求的数据流,并提供了有效的技术手段来防止此类劫持行为,确保网络环境的安全与纯净。 ... [详细]
  • Requests库的基本使用方法
    本文介绍了Python中Requests库的基础用法,包括如何安装、GET和POST请求的实现、如何处理Cookies和Headers,以及如何解析JSON响应。相比urllib库,Requests库提供了更为简洁高效的接口来处理HTTP请求。 ... [详细]
  • 本文探讨了在UIScrollView上嵌入Webview时遇到的一个常见问题:点击图片放大并返回后,Webview无法立即滑动。我们将分析问题原因,并提供有效的解决方案。 ... [详细]
  • h5调用本地摄像头和麦克风一
    h5调用本地摄像头和麦克风一,Go语言社区,Golang程序员人脉社 ... [详细]
  • 本文介绍了如何使用Python爬取妙笔阁小说网仙侠系列中所有小说的信息,并将其保存为TXT和CSV格式。主要内容包括如何构造请求头以避免被网站封禁,以及如何利用XPath解析HTML并提取所需信息。 ... [详细]
  • 本文详细探讨了使用Python3编写爬虫时如何应对网站的反爬虫机制,通过实例讲解了如何模拟浏览器访问,帮助读者更好地理解和应用相关技术。 ... [详细]
author-avatar
坐着驴车追宝马
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有