项目开发中遇到了这样的效果,百度了一波,可以使用css3的伪类实现:

/*斜角公用*/
1、外层的div加class='wrapper' 并需要设置相对定位
.wrapper:before {
-moz-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
content: '';
top: 0;
}
.wrapper:before, .wrapper:after {
background-repeat: no-repeat;
background-size: 100% 100%;
height: 120px; //斜角的高度
left: 0;     // 斜角的定位
position: absolute;
width: 100%;
} .wrapper:before, .wrapper:after {
background-image: url('../images/color2.png'); //斜角所引用的图片 正方形 背景透明的png格式
} .wrapper.alt:after { //div 下面也需要加斜角的话 最外层的div class="wrapper alt"
-moz-transform: translateY(100%) rotate(180deg);
-webkit-transform: translateY(100%) rotate(180deg);
-ms-transform: translateY(100%) rotate(180deg);
transform: translateY(100%) rotate(180deg);
bottom: 0;
content: '';
}

css写斜角的更多相关文章

  1. CSS Icon 项目地址 小图标-用css写成的

    http://cssicon.space/#/icon/focus 这是所有用css写成的  小图标  右侧有 html和css代码

  2. css写出0.5px边框(一)

    在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...

  3. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  4. css写宽为30%的正方形

    如何用纯css写一宽为30%的正方形,用到了padding属性: 会不会恍然大悟呢? <!DOCTYPE html> <html lang="en"> &l ...

  5. CSS Devices可以让你在线直接获取使用CSS写的Mobile外形。

    CSS Devices可以让你在线直接获取使用CSS写的Mobile外形. CSS Devices 彩蛋爆料直击现场

  6. 还在为小三角形切图?使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  7. css写出三角形(兼容IE)

    css写出三角形   利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...

  8. CSS写的提示框(兼容火狐IE等各大浏览器)

    项目上使用jQuery的Tooltip组件,在谷歌上正常,在火狐和IE下没有效果,所以根据谷歌的提示框单独用CSS写了个提示框,比较好的兼容了火狐和IE,且效果一样 原Tooltip代码: $('#d ...

  9. html+css写出类似word目录样式的内容

    word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...

随机推荐

  1. HTML--简单的注册网页

    利用表格,渐变色 <body background="未标题-2.jpg"> <table align="center" border=&qu ...

  2. Adam那么棒,为什么还对SGD念念不忘 (3)—— 优化算法的选择与使用策略

    在前面两篇文章中,我们用一个框架梳理了各大优化算法,并且指出了以Adam为代表的自适应学习率优化算法可能存在的问题.那么,在实践中我们应该如何选择呢? 本文介绍Adam+SGD的组合策略,以及一些比较 ...

  3. java接口的使用

    格式:public class SubImpl  extends Super  implements IA,IB 接口可以多继承,但是只能继承接口,不能继承类. 实现接口(支持多实现) [修饰符] c ...

  4. Django入门10--admin增强

  5. java 递归(Recursion)

    现在要求输出一个给定目录中的全部文件的路径. 本程序肯定只能依靠递归的操作完成,因为在一个给定的路径下有可能还是文件夹,那么如果是文件夹的话则肯定要继续列出,重复判断. 递归:程序调用自身的编程技巧 ...

  6. linux 运行处理者

    如同前面建议的, 当内核收到一个中断, 所有的注册的处理者被调用. 一个共享的处理者 必须能够在它需要的处理的中断和其他设备产生的中断之间区分. 使用 shared=1 选项来加载 short 安装了 ...

  7. gitLab操作规范和项目流程

    刚做完一个项目并且艰难得上线,对整个项目流程和gitLab规范 有了一些心得,给新来的同学普及一下. 最先产品会写一篇需求文档,咱们要先看需求文档对项目有一个大致了解,然后产品喊后端.ui.前端  一 ...

  8. 几个关于2-sat的题

    几个关于2-sat的题 HDU3062 传送门:http://acm.hdu.edu.cn/showproblem.php?pid=3062 题意: 从2n个人去宴会,有 m条关系 i和j不能同时去 ...

  9. 最近邻分类器,K近邻分类器,线性分类器

    转自:https://blog.csdn.net/oldmao_2001/article/details/90665515 最近邻分类器: 通俗来讲,计算测试样本与所有样本的距离,将测试样本归为距离最 ...

  10. xcode无线调试

    前言: xcode9 以上才会有无线调试这个功能,换了一个type-c口的mac,公司的新电脑,但是公司不给配转接口,到某东看了一下,type-c口同时可以转化usb和VGA的要198,官网差不多50 ...