我先额外的说一下怎么用CSS绘制三角形：
绘制三角形是把边框加粗，将元素的宽高都设为0，让其余的边框颜色透明，下面我们来看实现的代码：
先把边框的颜色设置成不同颜色：
#div{
border-color: red blue green pink;
border-style: solid;
border-width: 80px;
width: ;
}
显示的结果如下：
设置元素的三个边颜色透明，边框颜色默认：
#div1{
border-style: solid;
border-width: 80px;
width: ;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
结果如下：
这样就实现了CSS画三角形。
灵活的运用CSS，可以实现很多的功能，下面我来说说怎么用CSS来绘制背景条纹：
这里要用到背景的线性渐变:background:linear-gradient
1.背景渐变：
#div2{
margin-top: 100px;
width: 100px;
height: 100px;
/*设置背景渐变*/
background: linear-gradient(#fb3 %,#58a 7%);
效果如下：
中间有一块渐变区域；
把渐变比例进行调整：
background: linear-gradient(#fb3 %,#58a %);//等价于 background: linear-gradient(#fb3 50%,#58a 0)
得到两块纯色区域：
我们就可以利用背景渐变的这个特性进行条纹背景的绘制了。
三色的条纹背景：
#div2{
margin-top: 100px;
width: 100px;
height: 100px;
/*设置背景渐变*/
background: linear-gradient(#fb3 %,#58a ,#58a %,yellow );
给背景加上尺寸的限制：
#div2{
margin-top: 100px;
width: 100px;
height: 100px;
/*设置背景渐变*/
background: linear-gradient(#fb3 %,#58a ,#58a %,yellow );
/*线性渐变的宽度*/
background-size: % 45px;
}
接下来，我们开始绘制纵向的条纹：要用到background:linear-gradient(to right......)
#div3{
margin-top: 100px;
width: 100px;
height: 100px;
/*设置背景渐变*/
background: linear-gradient(to right,
#fb3 %,#58a );
运行结果如下：
同样也给他一个尺寸限制：
#div3{
margin-top: 100px;
width: 100px;
height: 100px;
/*设置背景渐变*/
background: linear-gradient(to right,
#fb3 %,#58a );
/*线性渐变的宽度*/
background-size:15px %;
}
结果：
实现了纵向的条纹，下面来试试斜向的条纹：要用角度background:linear-gradient(45 deg......)
#div4{
margin-top: 100px;
width: 100px;
height: 100px;
background: linear-gradient(45deg,
#fb3 %,#58a );
}
运行结果：
这不是我们想要的结果，再试试给背景加上尺寸：
#div4{
margin-top: 100px;
width: 100px;
height: 100px;
background: linear-gradient(45deg,
#fb3 %,#58a );
/*线性渐变的宽度*/
background-size:% 15px;
}
结果：
还是没有达到我们的要求，再改变背景的尺寸设置：
#div6{
margin-top: 100px;
width: 100px;
height: 100px;
/*设置背景渐变，渐变占了60%*/
background: linear-gradient(45deg,
#fb3 %,#58a );
/*线性渐变的宽度*/
background-size:15px 15px;
}
结果：
虽然还没有看见斜纹背景，但是我们已经看到利用背景渐变实现的多种图案了，从上图中看出一点规律，要实现斜纹背景 ，还要引入其他颜色：
#div7{
margin-top: 100px;
width: 100px;
height: 100px;
background: linear-gradient(45deg,
#fb3 %,#58a ,#58a %,#fb3 ,#fb3 %,#58a );
}
终于出现了，设置个尺寸：
#div7{
margin-top: 100px;
width: 100px;
height: 100px;
/*设置背景渐变，渐变占了60%*/
background: linear-gradient(45deg,
#fb3 %,#58a ,#58a %,#fb3 ,#fb3 %,#58a );
/*线性渐变的宽度*/
background-size:30px 30px;
}
背景条纹就大功告成了，以后可以自己绘制条纹背景啦！！！
CSS揭秘 技巧(五)：条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
css条纹背景
一. 水平条纹 1. 两种颜色: html
[css 揭秘] ：CSS揭秘 技巧(五)：条纹背景
条纹背景 https://github.com/FannieGirl/ifannie/问题:条纹背景 在设觉设计中无处不在,我们真的可以用css 创建图案吗? 这一章相对还是比较复杂的哦!一起get. ...
css条纹背景样式、及方格斜纹背景的实现
一.横向条纹如下代码: background: linear-gradient(#fb3 %, #58a %) 上面代码表示整个图片的上部分20%和下部分20%是对应的纯色,只有中间的部分是渐变色.如 ...
css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
利用CCS3渐变实现条纹背景
本文摘自中国工信出版集团 难题: 不论是在网页设计中,还是在其他传统媒介中(比如杂志和墙纸等),各种尺寸.颜色.角度的条纹图案在视觉设计中无处不在.要想在网页中实现条纹图案, ...
用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...
css中background背景属性概
css中background背景属性概 background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/background:url(背景图片路径) no-repeat ...
css中的背景、边框、补丁相关属性
css中的背景.边框.补丁相关属性 关于背景涉及到背景颜色与背景图片 背景颜色background-color即可设定: 背景图片background-image即可设定: 但是背景图片还涉及到其他的 ...
随机推荐
CF719E(线段树+矩阵快速幂)
题意:给你一个数列a,a[i]表示斐波那契数列的下标为a[i],求区间对应斐波那契数列数字的和,还要求能够维护对区间内所有下标加d的操作 分析:线段树 线段树的每个节点表示(f[i],f[i-1])这 ...
springMVC请求流程详解
SpringMVC框架是一个基于请求驱动的Web框架,并且使用了'前端控制器'模型来进行设计,再根据'请求映射规则'分发给相应的页面控制器进行处理. (一)整体流程 具体步骤: 1. 首先用户发送请 ...
【bs4】安装beautifulsoup
Debian/Ubuntu,install $ apt-get install python-bs4 easy_install/pip $ easy_install beautifulsoup4 $ ...
iOS - OC NSDictionary		字典
前言 @interface NSDictionary<__covariant keytype __covariant objecttype> : NSObject
用CRT connect MongoDB 使用Backspace无效
这是个很蛋疼的小问题... 使用./mongo 10.1.235.62:27017 连接上后 打错了无法删除!? 这是在逗我,那就修改CRT个设置,点击选项,会话选项,仿真,把终端改成Linux就行了 ...
user Collaborative Filtering
---恢复内容开始--- 算法步骤: 1.计算用户相似度 2.对于特定用户,选出k个最相似的用户,将这些用户评价过的前k好的物品推荐给该用户 用户相似度 度量: 其中|N(u)|表示用户u评价过的 ...
Mina源码阅读笔记(五)—Mina对连接的操作IoSession
IoSession是Mina管理两端的一个重要部分,也是Mina的核心,Session具有了生命周期的概念,它的生命周期和连接时紧密相关的,这点在后面的介绍中会涉及.另外,好像hibernate中也有 ...
全球第一免费开源ERP Odoo工业互联网生产制造功能模块术语解析
物料清单 物料清单(BoM)用于描述物料.每种物料的数量.以及制造某一产品所需的步骤.由于行业和成品性质的不同,同一个文件可能有不同的命名.例如,在制药行业中,可以使用术语“处方”. 周期 产品周期是 ...
前端学习 -- Css -- 字体的几个属性学习
font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体 ...
06: Pymysql
1.1 Pymysql安装与简介 1.安装 pip3 install pymysql 2.介绍(支持python3) 1. pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...
2164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
