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>

 

页面显示效果:

         div框选中状态,倒三角样式

 

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-18
  • 2022-01-22
猜你喜欢
  • 2022-12-23
  • 2022-02-11
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案