css3实现非矩形图片效果
经常在网站上看到有一些非矩形的图片展示。在以前可能我会毫不犹豫的直接放上张处理好的图片。但是这样的话确实有些不太友好。每每需要换图的时候,都要去开图像处理软件也是蛮拼的。
自从有了css3的选装,妈妈就再也不用担心我不会用ps了。通过一系列的旋转和隐藏的css,理论上可以做出任何形状的图片来。今天在此就以正六边型抛砖引玉一下,介绍一下多边形的大致原理。
首先看下效果图:
实现原理:
这个效果的主要css样式有:
1.transform: rotate(120deg); 图片旋转
2.overflow:hidden; 超出隐藏
我们要用到3层大小是一样的div进行旋转来得到这个效果。
最外层div(p1)旋转120度。第二层(p2)旋转-60度,第三层(p3)再旋转-60度,此时刚好回正。
我们的图片就放在第3层的div中。
经过旋转肯定有超出的部分,因此对3个div都设置overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。
再然后就是通过调整最里层的图片,来达到期望的显示效果了。
<style type="text/css">
.p1{width:200px;height:250px;transform:rotate(120deg);-ms-transform:rotate(120deg);-moz-transform:rotate(120deg);-webkit-transform:rotate(120deg);overflow:hidden;}
.p2{width:200px;height:250px;transform:rotate(-60deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);overflow:hidden;}
.p3{width:200px;height:250px;transform:rotate(-60deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);overflow:hidden;position:relative;}
img{position:absolute;top:0;left:0;width:80%}
</style> <div class="p1">
<div class="p2">
<div class="p3">
<img src="你的图片地址" />
</div>
</div>
</div>
css3实现非矩形图片效果的更多相关文章
- 纯Css3手工打造网页图片效果
.rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...
- 第八十节,CSS3边框图片效果
CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释 CSS3 ...
- CSS3 实现六边形Div图片展示效果
原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...
- CSS3旋转图片效果收集
火狐中文网图片效果: [http://i.firefoxchina.cn/?www.firefoxchina.cn] .news-img-wrapper:hover img { transfo ...
- 如何在MFC中创建非矩形button
一般情况下,我们创建的按钮都是矩形的,但有时为了满足特殊的需求,我们要在对话框中创建一个非矩形的按钮,比如,圆形,椭圆等. 要实现一个非矩形的按钮,这就涉及到了自绘控件.自绘控件的方法有很多,可以参考 ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- CSS3实现8种Loading效果【第二波】
原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...
- CSS3实现8种Loading效果【二】
CSS3实现8种Loading效果[二] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
随机推荐
- Jersey(1.19.1) - Representations and Java Types
Previous sections on @Produces and @Consumes referred to MIME media types of representations and sho ...
- Jersey(1.19.1) - Use of @Context
Previous sections have introduced the use of @Context. The JAX-RS specification presents all the sta ...
- HTTP - 摘要认证
基本认证便捷灵活,但极不安全.用户名和密码都是以明文形式传送的,也没有采取任何措施防止对报文的篡改.安全使用基本认证的唯一方式就是将其与 SSL 配合使用. 摘要认证是另一种 HTTP 认证协议,它与 ...
- C# 每天温习一点(IEnumerable<TSource>)
1, IEnumerable<TSource> 多数屌丝写成 IEnumerable<T> 无论TSource还是T都代表一个意思:要枚举的对象的类型 .IEnumerab ...
- g++ 编译和链接(转)
传统意义上的编译程序分两步走 —— 编译和链接: 1.编译(compile):指用编译器(compiler)将源代码(source code)生成二进制目标文件(object file),在Windo ...
- markdown编辑
有用的技巧之,如何实现首行空两格,把输入法切换成全角(shift+space),就可以实现一个两字符的空格了. 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 w s r s r s 文本 ...
- Sqlserver中关于锁
大多数数据库需要同时处理多个查询,这些查询并不会像车等待红绿灯排队等待,而是会寻找最短的路径执行,因此需要一个红绿灯进行约束,这个红绿灯就是锁 理论上所有的事务之间应该是完全隔离的,但是事实上隔离的成 ...
- TSQL基础(一) - 查询
select 1.查询一张表(orders)的所以纪录 select * from Orders 2.查询一张表(orders)某字段的所有记录 select OrderID,OrderDate fr ...
- iOS动画——弹窗动画(pop动画)
用pop动画简单实现弹窗的缩放和渐变,感觉这个动画常用,就写一下博客 pop动画是Facebook推出的动画引擎,请自行到GitHub上搜索下载拖拽导入xcode项目中. 更多pop动画使用和原理可网 ...
- Android 开机自启动应用
Android启动时,会发出一个系统广播 ACTION_BOOT_COMPLETED,它的字符串常量表示为 “android.intent.action.BOOT_COMPLETED” 开机自启动程序 ...