(编辑:jimmy 日期: 2024/10/31 浏览:2)
效果图如下所示:
直接上代码!
<!DOCTYPE html> <html lang="en"> <head> <title>小三角</title> <style> .up-triangle{ width:0px; height:0px; border-bottom:30px solid #000; border-left:15px solid transparent; border-right:15px solid transparent; margin:100px auto; } .down-triangle{ width:0px; height:0px; border-top:30px solid #000; border-left:15px solid transparent; border-right:15px solid transparent; margin:100px auto; } .left-triangle{ width:0px; height:0px; border-right:30px solid #000; border-top:15px solid transparent; border-bottom:15px solid transparent; margin:100px auto; } .right-triangle{ width:0px; height:0px; border-left:30px solid #000; border-top:15px solid transparent; border-bottom:15px solid transparent; margin:100px auto; } </style> </head> <body> <div class="up-triangle"></div> <div class="down-triangle"></div> <div class="left-triangle"></div> <div class="right-triangle"></div> </body> </html>
总结
以上所述是小编给大家介绍的用CSS样式写选择框右侧小三角,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!