当盒子边框的各个边框颜色都为同一种颜色时看上去都是矩形的,然而事实并非如此:
1.正常设定宽高时(盒子的宽高以及边框宽度>=2px)---梯形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:200px; height:200px; border:50px solid red; border-left-color: #ff594f; border-right-color: #e66d74; border-bottom-color:#34d1f9; } </style> </head> <body> <div></div> </body> </html>
2.上图可以看出,2条边框相交的地方是斜线,所以利用这个特点
当盒子的宽高都为0,边框宽度>1时----三角形(可以借此做三角形特效)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:0px; height:0px; border:50px solid red; border-left-color: #ff594f; border-right-color: #e66d74; border-bottom-color:#34d1f9; } </style> </head> <body> <div></div> </body> </html>
3.当盒子边框不为0,边框宽度为1px时(因为浏览器的最小分辨率为1px)---直线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:300px; height:300px; border:1px solid red; border-left-color: #9900FF; border-right-color: #fbe663; border-bottom-color:#34d1f9; } </style> </head> <body> <div></div> </body> </html>