经常在网站上看到有一些非矩形的图片展示。在以前可能我会毫不犹豫的直接放上张处理好的图片。但是这样的话确实有些不太友好。每每需要换图的时候,都要去开图像处理软件也是蛮拼的。
自从有了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实现非矩形图片效果的更多相关文章

  1. 纯Css3手工打造网页图片效果

    .rotate-demo { width: 220px; height: 220px; margin: 0 auto; background: no-repeat url("http://i ...

  2. 第八十节,CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一.属性解释     CSS3 ...

  3. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  4. CSS3旋转图片效果收集

    火狐中文网图片效果: [http://i.firefoxchina.cn/?www.firefoxchina.cn] .news-img-wrapper:hover img {     transfo ...

  5. 如何在MFC中创建非矩形button

    一般情况下,我们创建的按钮都是矩形的,但有时为了满足特殊的需求,我们要在对话框中创建一个非矩形的按钮,比如,圆形,椭圆等. 要实现一个非矩形的按钮,这就涉及到了自绘控件.自绘控件的方法有很多,可以参考 ...

  6. 使用css3来实现边框圆角效果

    经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...

  7. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  8. CSS3实现8种Loading效果【二】

    CSS3实现8种Loading效果[二]   今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! 第一种效果: 代码如下: < ...

  9. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

随机推荐

  1. Jersey(1.19.1) - Representations and Java Types

    Previous sections on @Produces and @Consumes referred to MIME media types of representations and sho ...

  2. Jersey(1.19.1) - Use of @Context

    Previous sections have introduced the use of @Context. The JAX-RS specification presents all the sta ...

  3. HTTP - 摘要认证

    基本认证便捷灵活,但极不安全.用户名和密码都是以明文形式传送的,也没有采取任何措施防止对报文的篡改.安全使用基本认证的唯一方式就是将其与 SSL 配合使用. 摘要认证是另一种 HTTP 认证协议,它与 ...

  4. C# 每天温习一点(IEnumerable<TSource>)

    1, IEnumerable<TSource> 多数屌丝写成  IEnumerable<T>  无论TSource还是T都代表一个意思:要枚举的对象的类型 .IEnumerab ...

  5. g++ 编译和链接(转)

    传统意义上的编译程序分两步走 —— 编译和链接: 1.编译(compile):指用编译器(compiler)将源代码(source code)生成二进制目标文件(object file),在Windo ...

  6. markdown编辑

    有用的技巧之,如何实现首行空两格,把输入法切换成全角(shift+space),就可以实现一个两字符的空格了. 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 w s r s r s 文本 ...

  7. Sqlserver中关于锁

    大多数数据库需要同时处理多个查询,这些查询并不会像车等待红绿灯排队等待,而是会寻找最短的路径执行,因此需要一个红绿灯进行约束,这个红绿灯就是锁 理论上所有的事务之间应该是完全隔离的,但是事实上隔离的成 ...

  8. TSQL基础(一) - 查询

    select 1.查询一张表(orders)的所以纪录 select * from Orders 2.查询一张表(orders)某字段的所有记录 select OrderID,OrderDate fr ...

  9. iOS动画——弹窗动画(pop动画)

    用pop动画简单实现弹窗的缩放和渐变,感觉这个动画常用,就写一下博客 pop动画是Facebook推出的动画引擎,请自行到GitHub上搜索下载拖拽导入xcode项目中. 更多pop动画使用和原理可网 ...

  10. Android 开机自启动应用

    Android启动时,会发出一个系统广播 ACTION_BOOT_COMPLETED,它的字符串常量表示为 “android.intent.action.BOOT_COMPLETED” 开机自启动程序 ...