亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css繪制透明三角形

  發(fā)布時間：2016-03-10 09:59:24   作者：種花家的小白兔   我要評論
這篇文章主要教大家使用css繪制透明三角形，css繪制三角形很簡單，如何繪制透明的三角形，本文為大家解決這個問題，感興趣的小伙伴們可以參考一下

css實現(xiàn)下圖樣式，具體像素值記不住了，很好設(shè)置，html code (2014百度秋招面試題)：

C# Code復制內(nèi)容到剪貼板
  1. <div id="demo"></div>   

  

分析：這個樣式的關(guān)鍵就在三角形和三角形實現(xiàn)了之后的變成只有個邊框的三角形。利用元素的：after和：before偽元素(請自動忽略低版本IE)。

思想：先實現(xiàn)個正方形，在實現(xiàn)個三角形層，放在右上角，然后再實現(xiàn)一個透明的三角形覆蓋黑色三角形的內(nèi)部，只留邊框。

XML/HTML Code復制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="zh">  
  3. <head>  
  4. <meta charset=utf-8>  
  5. <title>demo</title>  
  6. </head>  
  7.   
  8. <style>  
  9. #demo{   
  10.   width:100px;    
  11.   height:100px;    
  12.   border:2px solid #000;   
  13. }   
  14. #demo:before{   
  15.   content:'';    
  16.   display:block;    
  17.   width:0;    
  18.   height:0;    
  19.   position:relative;    
  20.   top:10px;    
  21.   left:100px;    
  22.   border-left:9px solid #000;    
  23.   border-top:7px solid transparent;    
  24.   border-bottom:7px solid transparent;   
  25. }   
  26. #demo:after{   
  27.   content:'';    
  28.   display:block;    
  29.   width:0;    
  30.   height:0;    
  31.   position:relative;    
  32.   top:-2px;    
  33.   left:100px;    
  34.   border-left:7px solid #fff;    
  35.   border-top:5px solid transparent;    
  36.   border-bottom:5px solid transparent;   
  37. }   
  38.   
  39. </style>  
  40. <body>  
  41.    <div id='demo'></div>  
  42.     <script>  
  43.   
  44.     </script>  
  45. </body>     
  46. </html>  

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

原文：http://www.cnblogs.com/codinganytime/p/5193475.html

相關(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

  • Html+CSS繪制三角形圖標

    這篇文章主要為大家詳細介紹了Html+CSS繪制三角形圖標的相關(guān)代碼，很多網(wǎng)頁都有三角形的圖標，通常是切的圖片，這里可以用css3+html寫出三角形，感興趣的小伙伴們可以參考
    2016-06-17

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

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

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

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

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

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

  • CSS中三角形的繪制與巧妙應用實例詳解

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

最新評論