css写斜角
项目开发中遇到了这样的效果,百度了一波,可以使用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写斜角的更多相关文章
- CSS Icon 项目地址 小图标-用css写成的
http://cssicon.space/#/icon/focus 这是所有用css写成的 小图标 右侧有 html和css代码
- css写出0.5px边框(一)
在移动端会出现线条太粗的现象,简单来说,是因为手机端的像素单位和ui的图比例是2:1,所以ui图的1px边框对我们来说就是0.5px,但是浏览器渲染的最小单位就是1px,下面给几种方法用css写出0. ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- css写宽为30%的正方形
如何用纯css写一宽为30%的正方形,用到了padding属性: 会不会恍然大悟呢? <!DOCTYPE html> <html lang="en"> &l ...
- CSS Devices可以让你在线直接获取使用CSS写的Mobile外形。
CSS Devices可以让你在线直接获取使用CSS写的Mobile外形. CSS Devices 彩蛋爆料直击现场
- 还在为小三角形切图?使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- CSS写的提示框(兼容火狐IE等各大浏览器)
项目上使用jQuery的Tooltip组件,在谷歌上正常,在火狐和IE下没有效果,所以根据谷歌的提示框单独用CSS写了个提示框,比较好的兼容了火狐和IE,且效果一样 原Tooltip代码: $('#d ...
- html+css写出类似word目录样式的内容
word目录的格式里这种很常见,要用html+css写出来刚开始还有点懵. 左右两边都是内容撑开宽度,中间内容的宽度也不是确定的,也是随着左右两边的内容动态变化的. 最终解决思路是,给右边内容加上白色 ...
随机推荐
- HTML--简单的注册网页
利用表格,渐变色 <body background="未标题-2.jpg"> <table align="center" border=&qu ...
- Adam那么棒,为什么还对SGD念念不忘 (3)—— 优化算法的选择与使用策略
在前面两篇文章中,我们用一个框架梳理了各大优化算法,并且指出了以Adam为代表的自适应学习率优化算法可能存在的问题.那么,在实践中我们应该如何选择呢? 本文介绍Adam+SGD的组合策略,以及一些比较 ...
- java接口的使用
格式:public class SubImpl extends Super implements IA,IB 接口可以多继承,但是只能继承接口,不能继承类. 实现接口(支持多实现) [修饰符] c ...
- Django入门10--admin增强
- java 递归(Recursion)
现在要求输出一个给定目录中的全部文件的路径. 本程序肯定只能依靠递归的操作完成,因为在一个给定的路径下有可能还是文件夹,那么如果是文件夹的话则肯定要继续列出,重复判断. 递归:程序调用自身的编程技巧 ...
- linux 运行处理者
如同前面建议的, 当内核收到一个中断, 所有的注册的处理者被调用. 一个共享的处理者 必须能够在它需要的处理的中断和其他设备产生的中断之间区分. 使用 shared=1 选项来加载 short 安装了 ...
- gitLab操作规范和项目流程
刚做完一个项目并且艰难得上线,对整个项目流程和gitLab规范 有了一些心得,给新来的同学普及一下. 最先产品会写一篇需求文档,咱们要先看需求文档对项目有一个大致了解,然后产品喊后端.ui.前端 一 ...
- 几个关于2-sat的题
几个关于2-sat的题 HDU3062 传送门:http://acm.hdu.edu.cn/showproblem.php?pid=3062 题意: 从2n个人去宴会,有 m条关系 i和j不能同时去 ...
- 最近邻分类器,K近邻分类器,线性分类器
转自:https://blog.csdn.net/oldmao_2001/article/details/90665515 最近邻分类器: 通俗来讲,计算测试样本与所有样本的距离,将测试样本归为距离最 ...
- xcode无线调试
前言: xcode9 以上才会有无线调试这个功能,换了一个type-c口的mac,公司的新电脑,但是公司不给配转接口,到某东看了一下,type-c口同时可以转化usb和VGA的要198,官网差不多50 ...