div框選中狀態,倒三角樣式


html代碼:

 1 <html>
 2 <head>
 3     <style>
 4         #triangle-bottomright {
 5             width:0;
 6             height: 0;
 7             display: inline-block;
 8             position: absolute;
 9             bottom: 0;
10             right: 0;
11             border-bottom: 20px solid red;
12             border-left: 20px solid transparent;
13         }
14         .main-div {
15             border: 1px solid red;
16             position: relative;
17             height: 30px;
18             line-height: 30px;
19             width: 50px;
20             text-align:center;
21         }
25     </style>
26 </head>
27 <body>
28     <div class="main-div">
29         <div>周一</div>
30         <span id="triangle-bottomright"></span>
31     </div>
32 </body>
33 </html>

 

頁面顯示效果:

         

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM