我先额外的说一下怎么用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&colon; Pymysql

1.1 Pymysql安装与简介 1.安装 pip3 install pymysql 2.介绍(支持python3) 1. pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...