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也可以实现.试试效果吧. 效果图: 代 ...
随机推荐
- 【转载】Android推送方案分析(MQTT/XMPP/GCM)
http://m.oschina.net/blog/82059 本文主旨在于,对目前Android平台上最主流的几种消息推送方案进行分析和对比,比较客观地反映出这些推送方案的优缺点,帮助大家选择最合适 ...
- sql常识-like
LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. LIKE 操作符 LIKE 操作符用于在 WHERE 子句中搜索列中的指定模式. SQL LIKE 操作符语法 SELECT colum ...
- 转:SqlServer2008误操作数据(delete或者update)后恢复数据
Sqlserver2008误操作数据(delete或者update)后恢复数据(转) 实际工作中,有时会直接在数据库中操作数据,比如对数据进行delete或者update操作,当进行这些操作的时候,如 ...
- oracle视图索引
reate table fleet_header( day date,name varchar2(20), route_id number(5),fleet_id number(5)); crea ...
- Cocos2d-x加速度计实例:运动的小球
下面我们通过一个实例介绍一下如果通过层加速度计事件实现访问加速度计.该实例场景如下图所示,场景中有一个小球,当我们把移动设备水平放置,屏幕向上,然后左右晃动移动设备来改变小球的位置. 下面我们再看看具 ...
- PHP学习笔记 - 进阶篇(5)
PHP学习笔记 - 进阶篇(5) 正则表达式 什么叫正则表达式 正则表达式是对字符串进行操作的一种逻辑公式,就是用一些特定的字符组合成一个规则字符串,称之为正则匹配模式. $p = '/apple/' ...
- 在button中加入一个view图片
#import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...
- Query 快速入门教程
Query 快速入门教程 http://www.365mini.com/page/jquery-quickstart.htm#what_is_jquery jquery常用方法及使用示例汇总 http ...
- OC8_setter方法展开
// // Person.h // OC8_setter方法展开 // // Created by zhangxueming on 15/6/18. // Copyright (c) 2015年 zh ...
- 读<<CLR via C#>> 详谈泛型
1,什么是泛型? 答:泛型是类型的模板,类型是实例(对象)的模板.C#提供了5种泛型:类,接口,委托,结构和方法. 2,使用泛型有什么好处? 答:继承实现的是"代码重用",而泛型实 ...