项目开发中遇到了这样的效果,百度了一波,可以使用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. C#的循环语句(四)

    一.while 循环(1).while 其实是for循环的变形写法for(int i = 1; i<=5;i++)  {循环体:} 上面的for循环可以写成int i= 1:for(;i< ...

  2. H3C 帧中继基本概念

  3. JPA进行insert操作时会首先select吗

    在某个项目中,使用JPA的saveAll方法去批量写入数据时,通过打印sql,发现每次insert前都会先select一次,极大的浪费了写入性能. 分析一下代码,saveAll() @Transact ...

  4. Vue之webpack的entry和output

    一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  5. 4-3 xpath的用法

  6. 四叶草(css)

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <style> . ...

  7. linux 延后执行

    设备驱动常常需要延后一段时间执行一个特定片段的代码, 常常允许硬件完成某个任务. 在这一节我们涉及许多不同的技术来获得延后. 每种情况的环境决定了使用哪种技术最好; 我们全都仔细检查它们, 并且指出每 ...

  8. 2018-8-10-C#-使用Emit深克隆

    title author date CreateTime categories C# 使用Emit深克隆 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17: ...

  9. C# 高级面试题

    很少会有人可以答对,如果你遇到一个来面试的人实在嚣张,就可以用本文的题去打击 本文内容就看着玩,请不要在严肃的面试中问题这样的题目 如果面试到一个人可以回答出下面的题目也不能证明他的技术很强,只能说明 ...

  10. H3C设置vty

    [H3C]User-interface vty 0 4     //进入telnet模式 [H3C-ui-vty0-4]autchentication-mode  none       //telne ...