欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用css實(shí)現(xiàn)全兼容瀏覽器的三角形

 更新時(shí)間:2014年09月23日 10:15:47   投稿:hebedich  
css實(shí)現(xiàn)三角形,網(wǎng)上講了很多,但我發(fā)現(xiàn)一般都是三角向上或者向下的,向左向右這兩方向似乎講得很少,本人試了一下,發(fā)現(xiàn)原來(lái)在IE下很難搞~~(萬(wàn)惡的IE)...

在當(dāng)前流行的的網(wǎng)站上,我們經(jīng)常會(huì)看到一些小三角形的下拉提示(微博頂部的下拉菜單),簡(jiǎn)單的方式可以使用一張圖片代替,但是隨著前端技術(shù)的發(fā)展,以及開發(fā)者對(duì)于前端性能的“吹毛求疵”,越來(lái)越多的前端開發(fā)者開始“返璞歸真”,在能不使用圖片的場(chǎng)景中減少圖片使用,css圖標(biāo)相對(duì)于圖片還有個(gè)優(yōu)勢(shì)是我們可以方便的定制圖標(biāo)的大小以及顏色。

css實(shí)現(xiàn)三角形圖標(biāo)已不是什么新鮮技術(shù),之前也有很多相關(guān)的技術(shù)文章,這篇文章主要是分析下在實(shí)際場(chǎng)景中使用時(shí)遇到的問題以及如何回避這些問題。
基本原理大同小異,這里主要介紹利用css border(當(dāng)然還可以使用css3的旋轉(zhuǎn)技術(shù)實(shí)現(xiàn),由于兼容性問題這里不涉及了)。

css border實(shí)現(xiàn)

一個(gè)div或者元素的border并不是我們直觀意義上的一條有高度的線,而是一個(gè)等高梯形或者三角形(寬高為0時(shí)),可以看一下效果:
div定義:

<div class="arrow1"></div>

css:

.arrow1{
  width: 0px;
  height:0px;
  border-width: 30px;
  border-style: solid;
  border-color: #007998 #47A447 #3C6AB9 #D2322D;
}

最終效果:

可以看到每一個(gè)方向的border都是一個(gè)三角形,那么我們只需把對(duì)應(yīng)方向剩余其他方向的border設(shè)置為透明或者隱藏掉就可以得到任何方向的一個(gè)三角形了。如果我們想得到一個(gè)下拉圖標(biāo),我們可以將border的左右和下邊框改為透明,css改動(dòng)如下:

.arrow1{
  width: 0px;
  height:0px;
  border-width: 30px;
  border-style: solid;
  border-color: #007998 transparent transparent transparent;
}

再看一下效果:

注:transparent 屬性用來(lái)在 background 中將 background-color 選項(xiàng)設(shè)置為背景顏色透明

bingo!就是我們想要的效果,但是在ie6下杯具鳥!

長(zhǎng)長(zhǎng)的大黑框,讓人無(wú)法直視,這是因?yàn)閕e6不支持transparent 透明屬性,這時(shí)候我們可以將對(duì)應(yīng)區(qū)域的border的樣式設(shè)置為dashed,dashed在邊框?qū)挾群艽髸r(shí),會(huì)隱藏掉。css修改如下:

  .arrow1{
    width: 0px;
    height:0px;
    border-width: 30px;
    border-style: solid;
    border-color: #007998 transparent transparent transparent;
  }

效果如下(ie6下查看):

但是,到此仍沒有結(jié)束,我們?cè)O(shè)置個(gè)陰影來(lái)查看下最終生成的效果:

即便是我們看到的已經(jīng)生成一個(gè)我們需要的三角形,但是三角形的占用高度仍是原高度,這會(huì)導(dǎo)致在和其他元素使用時(shí),造成上移的效果。此時(shí),我們需要把下邊框的高度設(shè)置為0:

  .arrow1{
    width: 0px;
    height:0px;
    border-width: 30px 30px 0;
    border-style: solid;
    border-color: #007998 transparent transparent transparent;
  }

再來(lái)看看效果:

似乎仍是不太友好,在使用時(shí)我們?nèi)孕枰薷膶?duì)應(yīng)的顏色,能不能根據(jù)父元素設(shè)定的顏色,顯示對(duì)應(yīng)的顏色呢?我們需要把border-color修改下:

.arrow1{
  width: 0px;
  height:0px;
  line-height: 0px;
  border-width: 30px 30px 0;
  border-style: solid dashed dashed dashed;
  border-left-color: transparent;
  border-right-color: transparent;
}

效果(使用當(dāng)前字體顏色):

當(dāng)然除了利用css border生成外,我們還可以使用特殊字符◇疊加定位來(lái)生成,也可以使用css3的旋轉(zhuǎn)來(lái)生成(ie6下需要hack處理)。利用border是一種常用而且簡(jiǎn)單兼容的方式

相關(guān)文章

  • 第3天:定義語(yǔ)言編碼

    第3天:定義語(yǔ)言編碼

    第3天:定義語(yǔ)言編碼...
    2006-12-12
  • 使用css實(shí)現(xiàn)全兼容tooltip提示框

    使用css實(shí)現(xiàn)全兼容tooltip提示框

    在上一篇文章中,使用css實(shí)現(xiàn)了一個(gè)全兼容的三角形圖標(biāo),這個(gè)三角型圖標(biāo)可以使用于多種場(chǎng)景,比如下拉圖標(biāo)、多級(jí)菜單等,這篇文章我們使用這個(gè)圖標(biāo)通過純css來(lái)實(shí)現(xiàn)一個(gè)我們常見的tooltip提示框。
    2014-09-09
  • HTML5?Canvas繪制圖形從入門到精通

    HTML5?Canvas繪制圖形從入門到精通

    Canvas?API(畫布)是在HTML5中新增的標(biāo)簽用于在網(wǎng)頁(yè)實(shí)時(shí)生成圖像,并且可以操作圖像內(nèi)容,基本上它是一個(gè)可以用JavaScript操作的位圖(bitmap)。Canvas?對(duì)象表示一個(gè)?HTML?畫布元素?-<canvas>。它沒有自己的行為,但是定義了一個(gè)?API?支持腳本化客戶端繪圖操作。
    2022-12-12
  • Lesson01_05    HTML中的超鏈接

    Lesson01_05 HTML中的超鏈接

    Lesson01_05 HTML中的超鏈接...
    2007-02-02
  • 詳解瀏覽器的緩存機(jī)制

    詳解瀏覽器的緩存機(jī)制

    緩存可以減少網(wǎng)絡(luò) IO 消耗,提高訪問速度。瀏覽器緩存是一種操作簡(jiǎn)單、效果顯著的前端性能優(yōu)化手段。
    2021-05-05
  • 非常好的CSS基本布局16例

    非常好的CSS基本布局16例

    非常好的CSS基本布局16例...
    2007-01-01
  • 基于HTTP瀏覽器緩存機(jī)制全面解析

    基于HTTP瀏覽器緩存機(jī)制全面解析

    這篇文章主要介紹了HTTP瀏覽器緩存機(jī)制,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2021-08-08
  • CSS入門教程篇

    CSS入門教程篇

    CSS入門教程篇...
    2007-03-03
  • CSS網(wǎng)頁(yè)布局入門教程2:一列自適應(yīng)寬度

    CSS網(wǎng)頁(yè)布局入門教程2:一列自適應(yīng)寬度

    CSS網(wǎng)頁(yè)布局入門教程2:一列自適應(yīng)寬度...
    2007-09-09
  • css進(jìn)階學(xué)習(xí) 選擇符

    css進(jìn)階學(xué)習(xí) 選擇符

    css這種沒有程序邏輯的代碼中,又能找出什么來(lái)說(shuō)明誰(shuí)做得更出色呢?下面小編給大家說(shuō)明如何從css選擇符的角度來(lái)提高css代碼質(zhì)量。
    2019-05-05

最新評(píng)論