DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> CSS三角箭頭應用實踐
CSS三角箭頭應用實踐
編輯:布局實例     

   用CSS來制作無圖片帶箭頭的DIV方框(此代碼比較適合追求純代碼者)

  這類效果也可以用圖片背景來實現,代碼會更簡潔

  CSS代碼:

  CSS Code復制內容到剪貼板

  div.container{position:absolute;

  top:30px;

  left:40px;

  font-size: 9pt;

  display:block;

  height:100px;

  width:200px;

  background-color:transparent;

  *border:1px solid #666;

  }

  s{

  position:absolute;

  top:-20px;

  *top:-22px;

  left:20px;

  display:block;

  height:0;

  width:0;

  font-size: 0;

  line-height: 0;

  border-color:transparent transparent #666 transparent;

  border-style:dashed dashed solid dashed;

  border-width:10px;

  }

  i{position:absolute;

  top:-9px;

  *top:-9px;

  left:-10px;

  display:block;

  height:0;

  width:0;

  font-size: 0;

  line-height: 0;

  border-color:transparent transparent #fff transparent;

  border-style:dashed dashed solid dashed;

  border-width:10px;

  }

  .content{

  border:1px solid #666;

  -moz-border-radius:3px;

  -webkit-border-radius:3px;

  position:absolute;

  background-color:#fff;

  width:100%;

  height:100%;

  padding:5px;

  *top:-2px;

  *border-top:1px solid #666;

  *border-top:1px solid #666;

  *border-left:none;

  *border-right:none;

  *height:102px;

  box-shadow: 3px 3px 4px #999;

  -moz-box-shadow: 3px 3px 4px #999;

  -webkit-box-shadow: 3px 3px 4px #999;

  /* For IE 5.5 - 7 */

  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');

  /* For IE 8 */

  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";

  }

  HTML代碼:

  XML/HTML Code復制內容到剪貼板

  

 

  

 

  
這是框中的文字,可動態顯示。高度自動增加,應該不錯吧^_^

  

 

  

  

  

  

 

  效果圖:

201586171725525.jpg (256×154)

  這次介紹下CSS制作三角箭頭

201586171755094.jpg (152×79)

  通常,我們做上圖那個三角形,一般都是做張圖,而且需要兩張,因為一般都是下拉菜單的效果,需要有個hover的樣式,箭頭是反的。那是不是有更好的辦法呢,畢竟要用兩張圖片來解決這麼一個小問題太浪費資源了,於是,下面我要用純CSS的方法來解決這一問題,用到的只需css的一個屬性,就是border-width

  我們先來看個樣式,如果設置元素邊框,會怎麼樣:

201586171813609.jpg (119×78)

  似乎看不出什麼,讓我給四個邊框加上不同的顏色吧再看看吧:

201586171847229.jpg (116×80)

  是不是發現了些什麼?對,讓我們把中間的文字去掉吧:

201586171906538.jpg (92×67)

  這樣,就出現4個三角形了,然後我們如果需要頂部那個三角形,只需要將border的left、right、bottom設置成背景色就行了:

201586171926760.jpg (83×67)

  這樣,我們需要的三角形就出現了,並且可以設置4個不同方向的了:

201586172331615.jpg (103×45)

  樣式代碼很簡單,就幾句話:

  CSS Code復制內容到剪貼板

  float: left;

  border-style: solid; border-width: 10px;

  border-color: #000 #ccc #ccc #ccc;

  height: 0;

  width: 0;

  font-size: 0;

  實際應用

  比如我們要使用向下的箭頭(兼容IE6寫法)

  HTML代碼:

  XML/HTML Code復制內容到剪貼板

  

 

 

  CSS代碼:

  CSS Code復制內容到剪貼板

  .demo{position:relative}

  .bottombottom-arrow{

  position:absolute;

  top:10px;

  left:0px;

  border-style:solid;

  border-width:100px;

  border-color:#000000 transparent transparent transparent;/*上邊框設置想要的顏色*/

  height:0;

  width:0;

  font-size:0;

  _border-color:#000000 tomato tomato tomato ; /*邊框透明色 For IE6-*/

  _filter:chroma(color=tomato);/*邊框透明色 For IE6-*/

  }

  說明:

  這裡的演示是用了邊框透明色,如果你用不到透明的話,直接設置border-color為你需要的顏色就可以了,免去為了兼容IE6的透明邊框濾鏡寫法

  Chroma屬性可以設置一個對象中指定的顏色為透明色,它的表達式如下:

  CSS Code復制內容到剪貼板

  Filter:Chroma(color=color)

  這個屬性的表達式是不是很簡單,它只有一個參數。只需把您想要指定透明的顏色用Color參數設置出來就可以了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved