纯css来画图-border应用
基础知识：
Css画图大部分是使用了css中的border来绘画图形，那首先我们就来看下border的基础知识，至于其他的遇到了再讲吧！
Border的基础知识:
一般我们这样简写：
border: 1px solid black;
我们也可以分开写成下面的形式：
border-width: thick;
border-style: solid;
border-color: black;解释：
1.border-width
border-width简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。
(1).指定具体的边框宽度值用长度单位（px）定值，可以用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)
(2).也可以使用这三个关键词：thin，medium 和 thick。
(3).1） 一次定义多种边框宽度：可以按照 top-right-bottom-left 的顺序设置元素的各边边框：
border-width: 15px 15px 15px 15px;
上面的例子也可以简写为（上边框-右边框和左边框-下边框）：
border-width: 15px 15px 15px;
也可以简写为（上边框和下边框-右边框和左边框）：
border-width: 15px 15px;
也可以简写为（所有 4 个边框）：
border-width: 15px;
2）定义单边边框宽度
如果要为元素框的某一个边设置边框宽度，而不是设置所有 4 个边的边框宽度，可以使用下面的单边边框宽度属性：
•border-top- width
•border-right- width
•border-bottom- width
•border-left- width
2.border-style是边的样式
(1).一次定义多种边框样式：我们可以为border-style设置一个值使一个元素的四条边框有同样的样式；也可以为一个边框定义设置多个样式值，这样每条边框就拥有不同的样式，四条边框样式的顺序为 top-right-bottom-left 。
border-style: solid solid solid solid;
上面的例子也可以简写为（上边框-右边框和左边框-下边框）：
border- style: solid solid solid;
也可以简写为（上边框和下边框-右边框和左边框）：
border- style: solid solid;
也可以简写为（所有 4 个边框）：
border- style: solid;
(2).定义单边边框样式： 如果要为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
•border-top-style
•border-right-style
•border-bottom-style
•border-left-style
(3)border-style的值
none : 无边框。与任何指定的border-width值无关
hidden : 隐藏边框。IE不支持
dotted : 定义点状边框。
dashed : 定义虚线边框。
solid : 实线边框（常用）
double : 双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 根据border-color的值画3D凹槽
ridge : 根据border-color的值画菱形边框
inset : 根据border-color的值画3D凹边
outset : 根据border-color的值画3D凸边
看下效果：
1).border-style:dotted
2).border-style: dashed；
3).border-style:solid
4). border-style:double
5).border-style: groove
6）.border-style: ridge
虽然第五第六种方法看起来不错，但ridge或groove效果并不是真正的多个边。
轮廓
创建两条边的最流行的方式是利用outline属性。我们在这里不讲，之后会专门写篇文章来说它。
7）.border-style: inset
8）. border-style: outset
3.border-color是边的样式
这个属性用来设定上下左右边框的颜色
(1).一次定义多种边框的颜色：我们可以为border-color设置一个值使一个元素的四条边框有同样的颜色；也可以为一个边框定义设置多个颜色值，这样每条边框就拥有不同的颜色，四条边框颜色的顺序为 top-right-bottom-left 。
border-color: red red red red;
上面的例子也可以简写为（上边框-右边框和左边框-下边框）：
border- color: red red red;
也可以简写为（上边框和下边框-右边框和左边框）：
border- color: red red;
也可以简写为（所有 4 个边框）：
border- color: red;
(2).定义单边边框颜色： 如果要为元素框的某一个边设置边框颜色，而不是设置所有 4 个边的边框颜色，可以使用下面的单边边框颜色属性：
•border-top- color
•border-right- color
•border-bottom- color
•border-left- color
下面我们来利用border做些东西
大家都知道正常情况下，我们给div一个border值会是这样的，为了方面演示，把border值设置的大些
.box {
border-top: 100px solid #669;
border-bottom: 100px solid #669;
border-left: 100px solid #669;
border-right: 100px solid #669;
height: 100px;
width: 100px;
}
"box">>
我们再把border的各个边框并设置成不同颜色看下效果，发现会是这样。
结果：绘制出了4个梯形
.box {
border-top: 100px solid #FF0000;
border-bottom: 100px solid #EE7923;
border-left: 100px solid #4DA635;
border-right: 100px solid #669;
height: 100px;
width: 100px;
}
"box">>
Div宽度和高度都设为0
.box {
border-top: 100px solid #FF0000;
border-bottom: 100px solid #EE7923;
border-left: 100px solid #4DA635;
border-right: 100px solid #669;
height: 0;
width: 0;
}
"box">>
结果：主流浏览器绘制出了4个三角形，发现IE6中存在一个小问题，上下边能形成三角形，左右两边仍然还是梯形
这是为什么呢？
IE6 下默认的字体尺寸大致在 12 - 14px 之间，当你试图定义一个高度小于这个默认值的 DIV 的时候， IE6 会固执的认为这个层的高度不应该小于字体的行高。
要解决这个问题，可以强制定义该 DIV 的字体尺寸，或者定义 overflow 属性来限制 DIV 高度的自动调整
设字体大小font-size设为0px，行高可设可不设，值得注意的是，设置 font-size:0 时这个容器的高度最小为 2px ，如果要设置 DIV 高度为 0 或 1px ，则需要使用 overflow:hidden;
总结：解决div会在ie6下高度为0不起作用
font-size: 0;
line-height: 0;
overflow: hidden;
再次调整下
.box {
border-top: 100px solid #FF0000;
border-bottom: 100px solid #EE7923;
border-left: 100px solid #4DA635;
border-right: 100px solid #669;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
结果：绘制出了4个三角形
总结：利用border制作出两个基础图形
下面我们就利用上面的基础知识和上面两个基础图形来做些简单的图形绘画。
1.简单的图形绘画(正方形,长方形，梯形）
（1）正方形：设置长宽的大小，设置长等于宽，设置边框border或者设置背景色background
.box {
height:120px;
width: 120px;
border:3px solid red;
}
（2）长方形：设置长宽的大小，设置长大于宽，设置边框border或者设置背景色background
.box {
height:120px;
width:240px;
border:3px solid red;
}
（3）梯形
这个也简单,上面我们已经绘制出4个梯形
现在我们只需要其中一个就可以了。所以我们必须只设置三个紧邻方向的border值，可以看到下图
但是我们最终要得到的是下方的梯形，那要怎么办才好呢？
从上图中我们可以看到中间的空白区域实际上是我们的div，那我们把div的高度设置成0，然后把左边框和右边框的颜色设置成透明transparent。可以得到下图
.box {
border-bottom: 100px solid #EE7923;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
height: 0px;
width: 100px;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
有人就讲了，那个高度为什么要设成0，把左边框和右边框的颜色设置成透明transparent不就可以得到梯形了吗? 我放两张图大家自己看看就明白了，我就不多讲了。
div高度不为0时是这样的
Div高度为0时是这样的
总结下梯形的画法：必须设置三个紧邻方向的border值，将div的高度设置成0，然后把其中两个相对方向的border颜色设置成透明transparent，且这两个border的宽度相等。
.box {
border-bottom: 100px solid #EE7923;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
height: 0px;
width: 100px;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
真的这么简单吗？少年你还是太天真嘛！
看下ie6下
这是什么鬼，左右边框框不是说好的透明嘛，而且那黑黑的一片是什么鬼
原因：
IE6 浏览器不支持transparent透明属性，就border生成三角技术而言，直接设置对应的透明边框的border- style属性为dashed即可解决这一问题，原因是在IE6下，点线与虚线均以边框宽度为基准，点线长度必须是其宽度的3倍以上 (height>=border-width3)，虚线宽长度必须是其宽度的5倍以上(height>=border-width5)， 否则点线和虚线都不会出现。
解决方法：
将边框需要设置为透明的，边的border-style为dashed，即可达到透明的效果
总结下梯形的画法：必须设置三个紧邻方向的border值，将div的高度设置成0，然后把其中两个相对方向的border颜色设置成透明transparent，且这两个border的宽度相等，border-style为dashed。
.box {
border-bottom: 100px solid #EE7923;
border-left: 100px dashed transparent;
border-right: 100px dashed transparent;
height: 0px;
width: 100px;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
2.实心三角箭头及应用
这个也简单
上面我们已经绘制出4个等腰直角三角形
与梯形的画法很相似，过程我就不详细讲了。
总结三角形的画法：必须设置三个紧邻方向的border值，将div的高度宽度设置成0，然后把其中两个相对方向的border颜色设置成透明transparent，border-style设为dashed。
（1）三角形：
.box {
border-left: 100px dashed transparent;
border-right: 100px dashed transparent;
border-bottom: 100px solid #EE7923;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
（2）倒三角形：
.box {
border-top: 100px solid #FF0000;
border-left: 100px dashed transparent;
border-right: 100px dashed transparent;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
（3）右三角形
.box {
border-top: 100px dashed transparent;
border-left: 100px solid #4DA635;
border-bottom: 100px dashed transparent;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
（4）左三角形
.box {
border-top: 100px dashed transparent;
border-right: 100px solid #4DA635;
border-bottom: 100px dashed transparent;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
应用：1）利用上面的图形我们可以做下下拉菜单的三角形切换
初始
鼠标移上去
span{
border-top: 5px solid #9E9E9E;
border-left: 5px dashed transparent;
border-right:5px dashed transparent;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
display: inline-block;
animation: .3s;
}
.box:hover span {
transform: rotate(180deg);
}
"box">下拉菜单>
2）选项卡切换三角
a {
color: #333;
text-decoration: none;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
.box ul li {
float: left;
margin-right: 10px;
}
.box{
height: 36px;
line-height: 36px;
border-bottom: 2px solid #007E2E;
}
.box a {
display: block;
color: #090;
position: relative;
padding: 0px 15px;
font-size: 16px;
font-weight: bold;
}
.box a:hover span{
width: 0px;
height: 0px;
background: transparent;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #007E2E;
position: absolute;
bottom: 0px;
left:40%;
}
<div class="box">
<ul>
<li>
<a href="#">国内旅游<span>span>a>
li>
<li>
<a href="#">美洲<span>span>a>
li>
<li>
<a href="#">欧洲<span>span>a>
li>
<li>
<a href="#">球迷俱乐部<span>span>a>
li>
<li>
<a href="#">Inbound Tour<span>span>a>
li>
ul>
div>
我们再来看下这个图
仔细观察会发现只设置相邻两边边框，会出现2个顶角直角三角形组成的正方形
如下图
.box {
border-bottom: 100px solid #EE7923;
border-left: 100px solid #4DA635;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
保留1种颜色，另一种设为透明色,可得到顶角直角三角形
(5)上左顶角直角三角形
.box {
border-bottom: 100px dashed transparent;
border-left: 100px solid #4DA635;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
(6)向下右顶角直角三角形
.box {
border-bottom: 100px solid #EE7923;
border-left: 100px dashed transparent;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
(7)向下左顶角直角三角形
.box {
border-top: 100px dashed transparent;
border-left: 100px solid #4DA635;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
(8)向上右顶角直角三角形
.box {
border-top: 100px solid #FF0000;
border-left: 100px dashed transparent;
height: 0;
width: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
"box">>
3.三角线绘制及应用
通过不同颜色的两个三角形素覆盖可以形成三角线，即：将边框颜色为白色的三角形，覆盖盖在另一个三角上
(1）向下三角线
.box{
position: relative;
}
.box span{
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
}
span.arrow_1{
border-top:20px solid #beceeb;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-20px;
z-index: 1;
}
span.arrow_2{
border-top:20px solid #ffffff;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-13px;
z-index:2;
}
"box">
(2）向上三角线
.box{
position: relative;
}
.box span{
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
}
span.arrow_1{
border-bottom: 20px solid #beceeb;
border-left: 20px dashed transparent;
border-right: 20px dashed transparent;
left: 80px;
bottom: -13px;
z-index: 1;
}
span.arrow_2{
border-bottom: 20px solid #ffffff;
border-left: 20px dashed transparent;
border-right: 20px dashed transparent;
left: 80px;
bottom: -20px;
z-index: 2;
}
"box">
(3）向左三角线
.box{
position: relative;
}
.box span{
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
}
span.arrow_1{
border-right: 20px solid #beceeb;
border-top: 20px dashed transparent;
border-bottom: 20px dashed transparent;
left: 73px;
bottom: -40px;
z-index: 1;
}
span.arrow_2{
border-right: 20px solid #ffffff;
border-top: 20px dashed transparent;
border-bottom: 20px dashed transparent;
left: 80px;
bottom: -40px;
z-index: 2;
}
"box">
(4)向右三角线
.box{
position: relative;
}
.box span{
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
}
span.arrow_1{
border-left: 20px solid #beceeb;
border-top: 20px dashed transparent;
border-bottom: 20px dashed transparent;
left: 80px;
bottom: -40px;
z-index: 1;
}
span.arrow_2{
border-left: 20px solid #ffffff;
border-top: 20px dashed transparent;
border-bottom: 20px dashed transparent;
left: 73px;
bottom: -40px;
z-index: 2;
}
"box">
应用举例：1.下拉菜单的三角线
2.侧边导航三角线
4.对话框气泡
(1）无背景色气泡
这样的气泡要怎么做呢，
基本原理
把div盒子设置为相对定位模式，三角型图标设置为绝对定位，位置相对于div盒子，调整到合适的位置。
第一种方法：
先做个三角形然后，再做一个边框颜色为白色的三角形，盖在这个倒三角的上面，就能实现了，即：
我们把气泡中三角的颜色变一下，可以得到下图
把上个倒三角颜色设为白色，可以得到
代码：
.box{
width:300px;
padding:30px 20px;
border:5px solid #beceeb;
position:relative;
}
.box span{
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
}
.box span.arrow_1{
border-top:20px solid #beceeb;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-20px;
}
.box span.arrow_2{
border-top:20px solid #ffffff;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-13px;
}
class="box">
class="arrow_1">
class="arrow_2">
hello，你好啊
这种方法需要注意的是;
两个三角形的的相对位置之差并不是是矩形边框的边框宽度。
设置尖括号距离与矩形边框大小的关系：
X为尖括号的边框宽大小，y为两个三角形的相对距离
2x2=y2
结论：(y/x) 2=2
两个三角形的相对距离之差是矩形的边框宽度的根号2倍
即：当边框宽为5时，相对距离为7
我们来看个小demo：
ul,li{
list-style:none;
}
ul.cys{
width:300px;margin:50px auto;
}
ul.cys li {
float: left;
position: relative;
}
.cys a {
display: inline-block;
}
.cys i.icon {
width: 40px;
height: 35px;
display: inline-block;
vertical-align: middle;
background-image: url(un_header_footer20160610.gif);
background-repeat: no-repeat;
}
.icon_phone{
background-position:0 0;
}
.icon_phone:hover{
background-position:0 -44px;
}
.icon_weixin{
background-position:-40px 0;
}
.icon_weixin:hover{
background-position:-40px -44px;
}
.divwx {
width: 150px;
display: none;
padding: 10px;
position: absolute;
top: 45px;
right: -30px;
z-index: 100;
text-align:center;
color:#f60;
border: 3px solid #b8b8b8;
background: #fff;
line-height: 20px;
font-weight: bold;
font-size: 12px;
}
.divwx span {
border-width: 0 10px 10px 10px;
border-color: transparent transparent #b8b8b8 transparent;
border-style: dashed dashed solid dashed;
width: 0;
height: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
position: absolute;
right: 50px;
}
.divwx span.xssj_1{
top: -10px;
}
.divwx span.xssj_2 {
top: -6px;
border-color: transparent transparent #fff transparent;
}
<ul class="cys">
<li onmouseover="change('tab2')" onmouseout="change1('tab2')">
<a href="#" target="_blank"><i class="icon icon_phone">i>a>
<div class="divwx" id="tab2">
<span class="xssj_1">span>
<span class="xssj_2">span>
安卓APP下载
<img src="images/ewm_app.png" width="150" height="150">
div>
li>
<li onmouseover="change('tab3')" onmouseout="change1('tab3')">
<a href="#"><i class=" icon icon_weixin">i>a>
<div class="divwx" id="tab3">
<span class="xssj_1">span>
<span class="xssj_2">span>
微信号：xxxx
<img src="images/ewm_wx.jpg" width="150" height="150">
div>
li>
ul>
<script>
function change(obj)
{
document.getElementById(obj).style.display="block";
}
function change1(obj)
{
document.getElementById(obj).style.display="none";
}
script>
还有一种方法就是我们可以把气泡看成是一个矩形加上两个倒三角形重叠
我们把气泡中三角的颜色变一下，可以得到下图
然后把上个倒三角颜色设置成白色，下个倒三角颜色设为矩形的边框颜色，就可以得到我们所要的气泡框了
代码：
.box {
padding: 30px 20px;
width: 300px;
border: 10px solid #beceeb;
position: relative;
}
.arrow_1 {
width: 0;
height: 0;
border-top: solid 10px #ffffff;
border-left: dashed 10px transparent;
border-right: dashed 10px transparent;
position: absolute;
left: 50%;
bottom: -10px;
}
.arrow_2 {
width: 0;
height: 0;
border-top: solid 10px #beceeb;
border-left: dashed 10px transparent;
border-right: dashed 10px transparent;
position: absolute;
left: 50%;
bottom: -20px;
}
class="box">
class="arrow_1">
class="arrow_2">
hello,你好啊
这种方法需要注意的是;
两个三角形的大小是矩形边框的大小，他们的相对位置之差是1个边框的大小
(2）有颜色有边框的气泡
在微信qq聊天窗口中经常会看到这样的带颜色的气泡，为了防止气泡的背景色与页面的背景色相同时气泡不明显，我们通常会给气泡加上边框，就像上图一样，那么这样的气泡对话框是怎么做出来的呢？听我慢慢道来
我们可以用像上面第一种方法那样用两个重叠的三角形和一个矩形来做一下
三角形的边框思路：
将颜色与矩形背景色相同的三角形覆盖在，颜色与矩形边框颜色相同的与上个三角形大小相同的三角形上。
.box{
position:relative;
width:300px;
padding:30px 20px;
background:#beceeb;
border-radius:4px;
border:1px solid #7695CC;
}
.arrow_1{
width:0;
height:0;
font-size:0;
overflow:hidden;
border-top:20px solid #7695CC;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
position:absolute;
bottom:-20px;
left:101px;
z-index:1;
}
.arrow_2{
width:0;
height:0;
font-size:0;
overflow:hidden;
border-top:20px solid #beceeb;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
position:absolute;
bottom:-19px;
left:101px;
z-index:2;
}
class="box">
class="arrow_1">
class="arrow_2">
这里需要注意的是：这里两个三角形的相对位置差并不是矩形的边框宽度
设置尖括号距离与矩形边框大小的关系：
X为尖括号的边框宽大小，y为两个三角形的相对距离
2x2=y2
结论：(y/x) 2=2
两个三角形的相对距离之差是矩形的边框宽度的根号2倍
即：当边框宽为5时，相对距离为7
5.旗帜
我们通过观察很明显可以看出，旗帜可以看成
(1）
.box{
position:relative;
}
.box span{
position: absolute;
top: 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
}
i {
display: block;
width: 0;
height: 0;
font-size:0;
overflow:hidden;
border-style:solid solid dashed;
border-width:40px 20px 20px;
border-color:#FF6600 #FF6600 transparent;
}
<div class="box">
<i>i>
<span>热卖span>
div>
(2)
.box{
position:relative;
}
i {
display: block;
width: 0;
height: 0;
font-size: 0;
overflow: hidden;
border-style: solid dashed solid solid;
border-width: 20px 20px 20px 80px;
border-color: #FF6600 transparent#FF6600 #FF6600;
}
.box span {
position: absolute;
top: 0;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
}
<div class="box">
<i>i>
<span>咨询热线span>
div>
备注：
回头再看这个知识点的时候发现自己竟然看不太懂上面的代码了，我也是醉了。
再理一下自己的思路：
旗帜可以看成
第一个图形可以看成是border组成的4个三角形，去掉一个三角形（其颜色设置成透明色），就可以得到上述的旗帜了。需要注意的是：由于旗帜是由border画出的，所以直接在里面写文字是显现不出来的（记不记得我们设置的width:0;height:0;）。所以我们把文字用定位的方式加到旗帜上。
至于画旗帜的border的数值设置方面，拿第一个例子来讲：左右边框值相等，可保证上下三角为等腰三角形，设左右边框为x，则下边框必为x
而上边框可自行确定合适的数值来确定旗帜上半部分大小。
总结旗帜的border的数值设置，也就是说：
为保证旗帜的缺口三角是等腰三角形，设置缺口三角和其相邻方向三角的边框值相等为x，相对方向的值可自行确定合适的数值为y，那么定位的文字部分的大小对应缺口三角的边长度为2x，临边为y。
这边还有一种方法：（仅限于左右方向的锦旗）
思路是这样的
利用背景色画个矩形，然后把白色的三角形定位到矩形内部边上，右边上则则是向左三角，左边则是向右三角......三角边值是1/2边(矩形高)，如果是矩形是用padding撑开的话，有三角的那个方向的padding值比对边方向的padding值少1/2边(矩形高)，这样的话文字部分看起来居中，较美观点。
上代码
.box{
position:relative;
display:inline-block;
line-height: 40px;
color: white;
font-size: 20px;
background: #0099d9;
padding: 0px 40px 0 20px;
}
.box i{
position:absolute;
right:0;
top:0;
border-width:20px 20px 20px 0;
border-style:dashed solid dashed dashed;
border-color:transparent #fff transparent transparent;
font-size:0;
width:0;
height:0;
line-height:0;
overflow:hidden;
display:block;
}
<div class="box">
<i>i>
<span>咨询热线span>
div>
应用:
(1)Step导航菜单
可以看到图中有三种图形，为了代码复用，以中间的图形为基本图形，
旗帜和向右三角形可以组成基本图形：
而两边的图形可以在之基础上稍稍做些改动即可：
最左边的图形将锦旗设置改变border-left-color，最右边的图形改变三角形的border- color
ul,li{
list-style:none;
margin:0;
padding:0;
}
.box li{
position: relative;
float: left;
}
.box span{
width: 0;
height: 0;
font-size:0;
overflow:hidden;
}
.flag {
border-style:solid solid solid dashed;
border-width:20px 120px 20px 20px;
border-color:#D7D7D7 #D7D7D7 #D7D7D7 transparent;
float:left;
}
.s{
border-top: 20px dashed transparent;
border-left: 20px solid #D7D7D7;
border-bottom: 20px dashed transparent;
float:left;
}
.box a {
display: block;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
color: #333;
text-decoration: none;
position: absolute;
left: 20px;
top: 0px;
}
/*特殊样式*/
ul > li:first-child .flag{
border-left-color:#FF6600;
}
ul > li:last-child .s{
border-color:#D7D7D7;
}
/*完成表单*/
.complete .flag{
border-color: #FF6600 #FF6600 #FF6600 transparent;
}
.complete .s {
border-left: 20px solid #FF6600;
}
.box .complete a {
color: #ffffff;
}
<div class="box">
<ul>
<li class="complete">
<span class="flag">span>
<span class="s">span>
<a href="javascript:;">填写订单a>
li>
<li class="">
<span class="flag">span>
<span class="s">span>
<a href="javascript:;">核对订单信息a>
li>
<li class="">
<span class="flag">span>
<span class="s">span>
<a href="javascript:;">支付费用a>
li>
<li class="">
<span class="flag">span>
<span class="s">span>
<a href="javascript:;">预订成功a>
li>
ul>
div>
如果觉得几个图形之间距离太远不好看的话，可以控制设置改变li的margin-right值(设置margin-right为负值）。
（2）.标签页的选项导航
6.平行四边形
平行四边形的制作方式是使用主要是借助了transform: skew(...)属性使长方形倾斜一个角度。
具体设置：设置一个div，设置背景色background或者border，然后使用transform: skew(...)属性使长方形倾斜一个角度。由于我们是把整个 div 进行了倾斜一定角度，如果直接在这个div内书写文字就会看到里面的的文字也是倾斜的，。所以我们需要在div内再加一个内层元素，并对内层元素做一次逆向的歪曲，这样里面的文字才能正常显示。
.box {
display: inline-block;
padding: 5px 20px;
border: 2px solid #8734f7;
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o-transform: skew(30deg);
transform: skew(30deg);
}
.content{
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-o-transform: skew(-30deg);
transform: skew(-30deg);
}
class="box">
class="content">
你好
你可能感兴趣的:(Web前端)