本文通过实例代码给大家介绍了用CSS样式写选择框右侧小三角的方法,需要的朋友参考下吧,希望能帮助到大家。
效果图如下所示:
直接上代码!
<!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> <p class="up-triangle"></p> <p class="down-triangle"></p> <p class="left-triangle"></p> <p class="right-triangle"></p> </body> </html>
相关推荐:
以上就是CSS样式实现选择框右侧小三角实例的详细内容,更多请关注php中文网其它相关文章!
已抢186710个
抢已抢67324个
抢已抢353200个
抢已抢667480个
抢已抢122646个
抢已抢24148个
抢