這篇文章主要教大家使用css繪製透明三角形,css繪製三角形很簡單,如何繪製透明的三角形,本文為大家解決這個問題,感興趣的小夥伴們可以參考一下
css實現樣式,具體像素值記不住了,很好設定,html code (2014百度秋招面試題):
C# Code複製內容到剪貼簿
<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>