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

Html+CSS繪制三角形圖標

  發(fā)布時間：2016-06-17 10:20:39   作者：佚名   我要評論
這篇文章主要為大家詳細介紹了Html+CSS繪制三角形圖標的相關(guān)代碼，很多網(wǎng)頁都有三角形的圖標，通常是切的圖片，這里可以用css3+html寫出三角形，感興趣的小伙伴們可以參考一下

先看看效果圖：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Document</title>  
  6.     <style type="text/css">  
  7.         #test1 {   
  8.             height:20px;   
  9.             width:20px;   
  10.             border-color:#FF9600 #3366ff #12ad2a #f0eb7a;   
  11.             border-style:solid;   
  12.             border-width:20px;   
  13.         }   
  14.         #test2 {   
  15.             height:0;   
  16.             width:0;   
  17.             overflow: hidden; /* 這里設(shè)置overflow, font-size, line-height */   
  18.             font-size: 0;     /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */   
  19.             line-height: 0;  /* 字體大小和行高, 導(dǎo)致盒子呈現(xiàn)被撐開的長矩形 */   
  20.             border-color:#FF9600 #3366ff #12ad2a #f0eb7a;   
  21.             border-style:solid;   
  22.             border-width:20px;   
  23.         }   
  24.         #test3 {   
  25.             height:0;   
  26.             width:0;   
  27.             overflow: hidden;   
  28.             font-size: 0;   
  29.             line-height: 0;   
  30.             border-color:#FF9600 transparent transparent transparent;   
  31.             border-style:solid;   
  32.             border-width:20px;   
  33.         }   
  34.         #test4 {   
  35.             height:0;   
  36.             width:0;   
  37.             overflow: hidden;   
  38.             font-size: 0;   
  39.             line-height: 0;   
  40.             border-color:#FF9600 transparent transparent transparent;   
  41.             border-style:solid dashed dashed dashed;   
  42.             border-width:20px;   
  43.         }/*兼容IE6*/   
  44.         #test5 {   
  45.             height:0;   
  46.             width:0;   
  47.             overflow: hidden;   
  48.             font-size: 0;   
  49.             line-height: 0;   
  50.             border-color:#FF9600 #3366ff transparent transparent;   
  51.             border-style:solid solid dashed dashed;   
  52.             border-width:40px 40px 0 0 ;   
  53.         }   
  54.     </style>  
  55. </head>  
  56. <body>  
  57.     <div id="test1"></div><br>  
  58.     <div id="test2"></div><br>  
  59.     <div id="test3"></div><br>  
  60.     <div id="test4"></div><br>  
  61.     <div id="test5"></div><br>  
  62. </body>  
  63. </html>  
  64.   

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • CSS繪制三角形的實現(xiàn)代碼(border法)

    這篇文章主要介紹了CSS繪制三角形的實現(xiàn)代碼(border法)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-11

  • 利用css繪制三角形的方法及拓展

    相信大家在日常網(wǎng)站布局中，經(jīng)常遇到一些三角形形狀的按鈕，有的人可能會想到用圖片代替，其實我們利用css就可以實現(xiàn)，本文給大家介紹了利用css繪制三角形的方法，以及一些
    2016-10-17

  • 純CSS繪制三角形箭頭圖案技術(shù)解析

    這篇文章主要為大家詳細介紹了純CSS繪制三角形箭頭圖案技術(shù)，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下
    2016-06-28

  • css繪制透明三角形

    這篇文章主要教大家使用css繪制透明三角形，css繪制三角形很簡單，如何繪制透明的三角形，本文為大家解決這個問題，感興趣的小伙伴們可以參考一下
    2016-03-10

  • 用CSS3繪制三角形的簡單方法

    這篇文章主要介紹了用CSS3繪制三角形的簡單方法,是CSS前端繪圖的基礎(chǔ),需要的朋友可以參考下
    2015-07-17

  • 純CSS繪制三角形箭頭效果

    最近我想修改一下這個網(wǎng)站，我想在上面放置一個提示框。這是很容易，但我想讓提示框上有一個三角形的箭頭。可是，一想到這需要使用圖片，并且各種顏色，各種方向的箭頭要準
    2014-05-07

  • 用CSS代碼繪制三角形 純CSS繪制三角形的代碼

    用CSS也可以畫畫了.不錯哦.下面我們來畫一個三角形看看
    2012-06-04

  • CSS中三角形的繪制與巧妙應(yīng)用實例詳解

    這篇文章主要介紹了CSS中三角形的繪制與巧妙應(yīng)用，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-11

最新評論