純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爲兩個三角形的相對距離
個人隨筆-個人前端之路-博客園
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;
}
<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爲兩個三角形的相對距離
個人隨筆-個人前端之路-博客園
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);
}
<div class="box">
    <div class="content">
     你好
    </div>
</div>

注意：本文爲原創，轉載請以連接形式標明本文地址 ，謝謝合做。
本文地址：http://www.cnblogs.com/wanghuih/p/5836635.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程