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>
页面显示效果:
