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