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>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
