纯css来画图-border应用

时间 2019-11-12

标签 css 画图 border 应用栏目 CSS 繁體版

原文原文链接

基础知识：

Css画图大部分是使用了css中的border来绘画图形，那首先咱们就来看下border的基础知识，至于其余的遇到了再讲吧！
Border的基础知识:
通常咱们这样简写：
border: 1px solid black;
咱们也能够分开写成下面的形式：javascript

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值设置的大些
css

.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;
}
<div class="box"></div>

咱们再把border的各个边框并设置成不一样颜色看下效果，发现会是这样。
结果：绘制出了4个梯形
html

.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;
}
<div class="box"></div>

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;
}
<div class="box"></div>

结果：主流浏览器绘制出了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不起做用java

font-size: 0;
line-height: 0;
overflow: hidden;

再次调整下web

.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;
}
<div class="box"></div>

结果：绘制出了4个三角形
总结：利用border制做出两个基础图形
浏览器

下面咱们就利用上面的基础知识和上面两个基础图形来作些简单的图形绘画。微信

1.简单的图形绘画(正方形,长方形，梯形）

（1）正方形：设置长宽的大小，设置长等于宽，设置边框border或者设置背景色background
app

.box { 
    height:120px;
    width: 120px;
    border:3px solid red;
}
<div class="box"></div>

（2）长方形：设置长宽的大小，设置长大于宽，设置边框border或者设置背景色background
xss

.box { 
    height:120px;
    width:240px;
    border:3px solid red;
}
<div class="box"></div>

（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;
}
<div class="box"></div>

有人就讲了，那个高度为何要设成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;
}
<div class="box"></div>

真的这么简单吗？少年你仍是太天真嘛！
看下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;
}
<div class="box"></div>

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;
}
<div class="box"></div>

（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;
}
<div class="box"></div>

（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;
}
<div class="box"></div>

（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;
}
<div class="box"></div>

应用：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);
}
<div class="box">下拉菜单<span></span></div>

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;
}
<div class="box"></div>

保留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;
}
<div class="box"></div>

(6)向下右顶角直角三角形

.box {   
    border-bottom: 100px solid #EE7923;
    border-left: 100px dashed transparent;
    height: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
<div class="box"></div>

(7)向下左顶角直角三角形

.box {   
    border-top: 100px dashed transparent;
    border-left: 100px solid #4DA635;
    height: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
<div class="box"></div>

(8)向上右顶角直角三角形

.box {   
    border-top: 100px solid #FF0000;
    border-left: 100px dashed transparent;
    height: 0;
    width: 0;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
<div class="box"></div>

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;
}
<div class="box">
    <span class="arrow_1"></span>
    <span class="arrow_2"></span>
</div>

(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;
}
<div class="box">
    <span class="arrow_1"></span>
    <span class="arrow_2"></span>
</div>

(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;
}
<div class="box">
    <span class="arrow_1"></span>
    <span class="arrow_2"></span>
</div>

(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;
}
<div class="box">
    <span class="arrow_1"></span>
    <span class="arrow_2"></span>
</div>

应用举例：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;
}

<div class="box">
    <span class="arrow_1"></span>
    <span class="arrow_2"></span>
    hello，你好啊
</div>

这种方法须要注意的是;
两个三角形的的相对位置之差并非是矩形边框的边框宽度。

设置尖括号距离与矩形边框大小的关系：
X为尖括号的边框宽大小，y为两个三角形的相对距离

2x²=y²
结论：(y/x) ²=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;
}

<div class="box">
        <div class="arrow_1"></div>
        <div class="arrow_2"></div>
    hello,你好啊
</div>

这种方法须要注意的是;
两个三角形的大小是矩形边框的大小，他们的相对位置之差是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;
}

<div class="box">
    <div class="arrow_1"></div>
    <div class="arrow_2"></div>
</div>

这里须要注意的是：这里两个三角形的相对位置差并非矩形的边框宽度
设置尖括号距离与矩形边框大小的关系：
X为尖括号的边框宽大小，y为两个三角形的相对距离

2x²=y²
结论：(y/x) ²=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);
}

<div class="box">
    <div class="content">
     你好
    </div>
</div>

注意：本文为原创，转载请以连接形式标明本文地址，谢谢合做。
本文地址：http://www.cnblogs.com/wanghuih/p/5836635.html