用css打造一個三角形箭頭

時間  2019-12-12
標籤 css 打造 一個 三角形 箭頭 欄目 CSS 简体版
原文   原文鏈接

用css製做一個三角形箭頭css

 

三角形咱們常常用在列表、下拉提示、麪包屑導航的位置，給用戶以導向的引導做用，好比，在有下拉列表的地方，咱們能夠用向下的箭頭，在列表的時候，咱們能告訴用戶每一個列表項和下一個列表項的關係，當在麪包屑導航中，能讓用戶瞭解他如今所處的欄目或者頻道。咱們有哪些方法來實現它呢，下面我根據咱們的實際工做中的經驗做了簡單的總結。html

第一種方案，咱們能夠經過使用背景圖片的方式來處理，這也是咱們最常常用的方法。
1）單個切出三角形，咱們能夠根據UI設計的需求，切出與之相適應的圖片，好比 ，咱們能方便的根據需求，製做不一樣高度和顏色的三角形。在使用方面，HTML代碼和CSS代碼相對簡單。以下面圖是示例：css3



這種直接使用背景圖片的方法適合咱們在三角形包含漸變、紋樣、肌理等特殊效果的時候，咱們能夠設置它的顏色來保證圖形邊緣與背景色完美一致。缺點是咱們須要爲每一個不一樣的方向需求製做一個圖片，增長了http請求和CSS代碼的數量。
因爲這種方法比較簡單,咱們就不作演示了.
2）相比以前，咱們怎麼作到減小http請求，同時也標示出四個方向的三角形呢？咱們能夠製做一個菱形 ，經過使用CSS的背景定位來選擇與之相匹配的形狀。這樣咱們就能用一個圖形，達到四個圖形的目的。瀏覽器

 
複製代碼 
<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF">    <em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat 0 0;width:67px;height:34px;display:block;position:absolute;top:-34px;left:15px"></em><em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat -35px 0;width:34px;height:67px;display:block;position:absolute;right:-34px;top:15px;"></em>    <em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat 0 -35px;width:67px;height:34px;display:block;position:absolute;bottom:-34px;left:15px;"></em>    <em style="background:url(http://varhi.com/wp-content/uploads/2011/01/triangular_4.gif) no-repeat 0 0;width:34px;height:67px;display:block;position:absolute;left:-34px;top:15px;"></em></div>
複製代碼

 

　　

3）方法二種的方法雖然咱們能夠實現調用一次背景圖片標示四種三角狀態的狀況，可是在顏色方面確實單一的，咱們只能由一種顏色，那咱們須要增長三角形一樣在激發鼠標懸浮僞類響應的時候，咱們應該怎麼作呢？好比鼠標懸浮的時候由紅色變成橙色？那咱們就可使用這種方法，經過正負形的方法，方法二中的方法咱們經過一個正形，那下面的例子咱們使用一個負形ui

HTML文件url

複製代碼 
<div style="width:100px;height:100px;position:relative;margin:34px;background:#6699FF">
    <a class="n_a_1"></a>
    <a class="n_a_2" ></a>
    <a class="n_a_3" ></a>
    <a class="n_a_4"></a>
</div>
複製代碼

CSS文件spa

複製代碼 
.n_a_1,.n_a_2,.n_a_3,.n_a_4{background-image:url(http://varhi.com/wp-content/uploads/2011/01/negative_4.gif);background-repeat:no-repeat;position:absolute;display:block;}
a.n_a_1{background-color:#0033CC;background-position:0 0;width:67px;height:34px;top:-34px;left:15px}
a.n_a_1:hover{background-color:#db0085}
a.n_a_2{background-color:#0066CC;background-position:-33px 0;width:34px;height:67px;right:-34px;top:15px;}
a.n_a_2:hover{background-color:#db0085}
a.n_a_3{background-color:#00CCCC;background-position:0 -33px;width:67px;height:34px;bottom:-34px;left:15px;}
a.n_a_3:hover{background-color:#db0085}
a.n_a_4{background-color:#00FFCC;background-position:0 0;width:34px;height:67px;left:-34px;top:15px;}
a.n_a_4:hover{background-color:#db0085}
複製代碼

這樣子，咱們就能很方便的改變背景顏色來得到不一樣的顏色的三角形了。
可是咱們也發現了另外一個問題，那就是當咱們但願把這個三角形放到有顏色的背景時，構成其負形的區域顏色也會成爲咱們的限制，由於咱們必須將構成負形的顏色與之相匹配。並且第二種方法和第三種方法中只能實現固定尺寸的正三角形，若是咱們想隨時改變它形狀的話，不使用css3的背景大小屬性background-size話（此屬性已經已經被Opera\firefox\Safari\Chrome\IE 9），可能下面的方法更適合。firefox

第二種方案，咱們不是經過圖形圖片的方式,而是直接使用標籤自己的css屬性特色或者字符來進行創做.
1)咱們可使用border 屬性來實現，border屬性包括寬度、顏色、樣式。咱們能夠改變它的顏色來適應。經過下圖我能就能分析出,border屬性相關特色:
設計

相關代碼：3d

複製代碼 
<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    <!--
        #boder_arrow{border-width:20px;border-color:#ff6699 #ff3366 #cc0066 #990033;border-style:solid;width:0;height:0;line-height:0; }
    -->
    </style>
    </head>
<body>
    <div id="boder_arrow"> </div>
</body>
</html>
複製代碼

咱們能夠改變border不一樣方向的顏色來找到咱們須要的顏色，咱們甚至能夠經過border-width的修改,創造不一樣角度的三角形.

 

 

 

是否是上面的經過修改border-width後得到的上面的零件頗有意思，可讓咱們輕易的節省爲創造三角型用掉的那個寶貴的 http請求。
巧思無難事，可能有時候你須要的並非一個等腰的三角型，好比說咱們常見到下面這種圖形

那個不是等腰三角形的圖形，咱們也能經過改變邊框的寬度來獲得：

 

2)經過旋轉塊狀標籤角度的方法得到,這種方法須要支持css3屬性transform的瀏覽器支持.
咱們常常須要這樣的形式:

那咱們對這個圖形進行分解

那咱們先來實現上面分解的圖形：

 

當咱們將旋轉後的正方形的背景色色值設置爲相交盒形相同的色值時,他們就融爲一體了.

 

3)經過◆字符實現.實現方法與上面的相似,將字符的顏色設置爲和但願表現得容器相同的顏色,從而獲得一個視覺上的三角形.只是此次咱們沒有用到CSS3的transform屬性，兼容性更好一些。

◆◆◆◆

代碼以下：

 

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="author" content="rage" />
    <title>符號三角</title>
    <style>
    <!--
    .wrap_char{width:150px; height:150px; text-align:center; margin:100px; background:#ccc; position:relative;}
    .a_char,.b_char,.c_char,.d_char{font-size:50px; text-align:center; color:#ccc; position:absolute; z-index:10;line-height:0;line-height:50px;}
    .a_char{left:-4px;bottom:-25px;}
    .b_char{left:-25px; top:-4px;}
    .c_char{top:-25px;right:-4px;}
    .d_char{right:-25px; bottom:-5px;}
    </style>
</head>
<body>
    <div class="wrap_char">
        <span class="a_char">◆</span>
        <span class="b_char">◆</span>
        <span class="c_char">◆</span>
        <span class="d_char">◆</span>
    </div>
</body>
</html>
複製代碼

案例研究：
1）線形的三角形，以下圖：

這種圖形的實現咱們常常依賴於圖形實現，其實咱們能夠經過border屬性，將兩個三角型的疊加就能夠得到相應的效果：

複製代碼 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>三角形疊加</title>
    <style type="text/css">
    <!--
    .pos_rel{position:relative;_line-height:0;} .pos_rel .icon1{display:block;border-width:9px 9px 9px 0;border-color:transparent #1c7ecf transparent transparent; border-style:solid;position:absolute;left:0;top:0;width:0;height:0;} .pos_rel .icon2{display:block;border-width:9px 9px 9px 0;border-color:transparent #fff transparent transparent; border-style:solid;position:absolute;left:4px;top:-9px;width:0;height:0;} --> </style>
</head>
<body>
    <div class="pos_rel"> <span class="icon1"><span class="icon2"></span></span> </div>
</body>
</html>
複製代碼

這樣咱們就能得到更漂亮的回覆窗口：

2）導航狀態

咱們也能夠經過border創造的三角形來實現：

標籤一標籤二標籤三標籤四

HTML代碼：

複製代碼 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>標示導航狀態</title>
<style type="text/css">
    #nav_state{height:20px;}
    #nav_state a{width:80px;display:block;text-align:center;padding:2px;line-height:18px;;float:left;background-color:#ccc;margin-right:5px;color:#333;position:relative;text-decoration:none;font-size:12px;}
    #nav_state a span{display:none;}
    #nav_state a.current,#nav_state a:hover{background-color:#000;color:#fff;}
    #nav_state a.current span,#nav_state a:hover span{display:block;width:0;height:0;border-width:8px;border-style:solid;border-color:#000 transparent transparent;position:absolute;top:20px;left:32px;overflow:hidden; }
</style>
 </head>
 <body>
 <div id="nav_state">
    <a href="#" charset="current">標籤一<span></span></a> <a href="#">標籤二<span></span></a> <a href="#">標籤三<span></span></a> <a href="#">標籤四<span></span></a>
  </div>
</body>
</html>
複製代碼

上面咱們實現的是固定寬度，那若是是自適應寬度的、箭頭朝上的呢？

  • 首頁
  • 二級欄目
  • 三級欄目可能會比較長
  • 四級欄目

 

複製代碼 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>導航箭頭朝上標示符</title>
<style type="text/css">
#menu_liquid{height:30px;margin:20px; list-style:none;font-size:12px;} #menu_liquid li{height:30px;line-height:30px;float:left;white-space:nowrap;} #menu_liquid li a{display:block;float:left;height:30px;position:relative;padding:0 12px;background:#777;color:#fff; text-decoration:none;border-right:1px solid #ccc;} #menu_liquid li a span{display:none;} #menu_liquid li a.current,#menu_liquid li a:hover{ background:#000;color:#0099FF;} #menu_liquid li a.current span,#menu_liquid li a:hover span{display:block;width:0;height:0;border-style:solid;border-color: transparent transparent #f0f0f0 transparent;border-width:0 8px 8px;position:absolute;bottom:0;left:50%;margin-left:-4px;overflow:hidden;z-index:0;} #menu_liquid li a em{display:block;text-align:center;font-style:normal;cursor:pointer;}
</style>
</head>
<body>
    <ul id="menu_liquid">
        <li><a href="#"><span></span><em>首頁</em></a></li>
        <li><a href="#"><span></span><em>二級欄目</em></a></li>
        <li><a href="#"><span></span><em>三級欄目可能會比較長</em></a></li>
        <li><a href="#"><span></span><em>四級欄目</em><span></span></a></li>
    </ul>
</body>
</html>
複製代碼

這裏咱們要注意的是什麼呢？那就是箭頭是絕對定位的，當心箭頭過大的時候，將上面的文字覆蓋掉了。

上面的只是一些方法的總結，可能並非最優的方法，最優的實現方法可能還須要具體問題具體分析，就當在此拋磚引玉了。同時歡迎你們提出相左的見解。

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