HTML页面多个平行四边形,用css3旋转写平行四边形

今天要布局的网页背景是一个平行四边形，切图作为背景不好，很影响网页的打开速度，，那么这个平行四边形就css代码写出来，可以用css3的CSS3 transform 旋转的属性写出来，就是transform：skew，全是css代码写的可好了，大爱css3。

先看下效果：

代码如下：html>

用css3旋转写平行四边形

.box{width:1200px;margin:100px auto;}

.skew{width:1000px;height:734px;background:#f0eb4f;margin:0 auto;color:#000;

font-size:20px;line-height:500px;text-align:center;transform: skew(-15deg);}

.skew-main{transform: skew(15deg);}

.box02 {

width: 0;

height: 0;

border-top: 100px solid #f44261;

border-right: 100px solid transparent;

}

用css3旋转写平行四边形

爆款服务器

除注明外的文章,均为来源:老汤博客,转载请保留本文地址！

HTML页面多个平行四边形,用css3旋转写平行四边形相关推荐

可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
css3缓慢出现,让CSS3旋转开始缓慢然后结束缓慢？
这不是一个可以通过使用ease-in解决的问题.让CSS3旋转开始缓慢然后结束缓慢? 如果我有一个元素,我想在CSS3中旋转一段时间,但是开始慢,结束速度慢,我该怎么做? CSS @-webkit-k ...
炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...
css3旋转带放大缩小效果
下载地址 css3旋转带放大缩小效果,鼠标悬停的时候触发放大或缩小并旋转的动画. dd:
safari浏览器兼容css3旋转同时位移处理
safari浏览器兼容css3旋转同时位移处理项目某元素同时执行位移+旋转时,谷歌浏览器等其他浏览器正常,safari浏览器不兼容(pc和苹果手机一样) 网络方案 (一) (亲测然并卵 ~~) ...
CSS3旋转实例学习
CSS3旋转实例学习(附3D旋转实例) 我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用 ...
css3动画旋转360度,CSS3旋转动画(360度旋转、旋转放大、放大、移动) 用法和实例...
CSS3旋转动画(360度旋转.旋转放大.放大.移动) 用法和实例 Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet Explo ...
CSS3旋转动画(平滑,无限循环)
CSS3旋转动画 /* 旋转动画指定class为trun即可使用*/ .turn {animation: turn 10s linear infinite; }/* turn : 定义的动画名称 1 ...
使用CSS3旋转DIV
使用CSS3旋转DIV 参加某公司的前端工程师笔试,遇到以下问题. 请完成以下填空,使得id为loading的div每1秒转1圈并无限循环. <html> <head&g ...

HTML页面多个平行四边形,用css3旋转写平行四边形

HTML页面多个平行四边形,用css3旋转写平行四边形相关推荐

最新文章

热门文章