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>

页面显示效果:

         

原文地址:https://www.cnblogs.com/miaosha5s/p/7520167.html