利用css來實現一個透明三角形的特效代碼

來源:互聯網
上載者:User
這篇文章主要教大家使用css繪製透明三角形,css繪製三角形很簡單,如何繪製透明的三角形,本文為大家解決這個問題,感興趣的小夥伴們可以參考一下

css實現樣式,具體像素值記不住了,很好設定,html code (2014百度秋招面試題):

C# Code複製內容到剪貼簿

  1. <p id="demo"></p>

分析:這個樣式的關鍵就在三角形和三角形實現了之後的變成只有個邊框的三角形。利用元素的:after和:before虛擬元素(請自動忽略低版本IE)。

思想:先實現個正方形,在實現個三角形層,放在右上方,然後再實現一個透明的三角形覆蓋黑色三角形的內部,只留邊框。

XML/HTML Code複製內容到剪貼簿

<!DOCTYPE html>  <html>  <head>  <meta charset=utf-8>  <title>demo</title>  </head>  <style>  #demo{     width:100px;      height:100px;      border:2px solid #000;   }   #demo:before{     content:'';      display:block;      width:0;      height:0;      position:relative;      top:10px;      left:100px;      border-left:9px solid #000;      border-top:7px solid transparent;      border-bottom:7px solid transparent;   }   #demo:after{     content:'';      display:block;      width:0;      height:0;      position:relative;      top:-2px;      left:100px;      border-left:7px solid #fff;      border-top:5px solid transparent;      border-bottom:5px solid transparent;   }     </style>  <body>     <p id='demo'></p>      <script>        </script>  </body>
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.