html border画三角形
最近遇到了问题就是画推进条类似于![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXwAAABxCAIAAABZbI/3AAAOw0lEQVR4nO2dT28bxxnG8yX0FXTskegHKITefNGxOgkg4LK14bQqqjUSHxpVCRxj1cKpErUVBGxZpGgTkG4SsGkjV0kAyw7aBmCINHIK2q5sRrWakrZlWjat7WF3dufPO7MrydzlLJ8HT4CIHM6/nfnxnXc3zHP+0dRwy24j+Q/2CiHHazY9p+w2fL/hOl5TKuU2iJr0anoOX7bhOl7T0OP4U0I5qRZlzGHhpueUy1QDZdZE03OoMbOBm+YlHv+x1HDFLjZcqU5dF4UrGV4eqTdCXcRUh9WTQ2h6rufFHxGLmf5KKf3Ma9rUDYCUWFb+pPg33X3TymCzn1iPvG7D1g2Lhu5Mw1WXsVw3VUaZMv4FaoRi28/pepmgROiEO0pe5+RWdRsMP0IJsSbzUlIWkjzopuc6DvuDqpK1q20uKND0nLLjeXSh4A3X8xzXjedEGhT797jL0Wvyxfz49dOVi+tHuTj8cLh+cBeEXIZc6WAeXI/e+fFSTISOOKGO1xSXpfp9Q+nQ9KH2Cj1yda3I854AimhxKLCg10/iWBLrabhOuJgdr0F1zm0kdzpez0mbVClD0JZtLsdryCMMhrz1h59Uzr255fvHgo5e3CqnN7hYTFOb61LLOd0XK10qmk+2t6IXyK+OtBNBLiJxs/ND5aCTvCbkOpPkep4jRzh8/5rR24ZIp+E6XsPzGmHH1ZKmr/u4oRg6JH4JGSKdQ4ApDDnlL7CRiXQODx0N9sU1HM0zsSSTxpjwTWvuYNRN/cLKKNIJ+8HmhWKf+lldUCA0bFjj9EZifYhfcDWRTuLKNsYG8uvprmPTc4kRH2YnGKUNurWRThyj8UWESyaf24yTpUQ68UXmT6RqZw9/vAqjsxCUjus6jus68oVLXCtaSdCkoUNOiEQ8c+OJ9XBvsQGahhF2m14KypxrF7m+03xXHdfV7/ZAWUFHNy3sMsZfqmH8HQSRxu9k/mIGZenQkN84KSMdfl+QUNf1J5FKQn2mkR03qUM3n9gs3zA/d0KEdrxIJ25e6plU85FyOmx0EXl4yPE9TlgrpEzXMvq4OdDQNt6QWZ8QsKSPdNjfJHTEMdNFiaReXpFO8rJNEeloweJ4DTIWZx9ouOqXVyroNDyXTMlIy50IOchvAXO2O/wIEdB7brlcdhyuHSq+uP9V+6v72trTKGU2vhnkxj1NqMFPrD4zF9Ukr3lxmnXhrJyGOWKkwy0o14u+xJRVaVwr5LwnpTbCP42wCN80QidNPeHbDdf1NDkdbkpU+vOzoH4nh6XpwwgxcPHTut3+aPfWrd1Hvp9BpOMF/2imxbQldNFgEBk1m2LSUxtSibnTsnBfjIx0xPs+InTUudaPgDs7KLkKJUDjeirGF8eNeMw1RECIzzsEdMQ7X8rXvfJNxh1zfHlBSNCJBqvcXTtypCOhR0ihBVnr5LWizlqcDOMbEqNW5ewjf6VF2DLnARLr4UdpiHQE1irbNFx5pj1EhwwG6HgucetBAe1RoSP1QZ/XkIYWdZCtZnIbc2M2HwWC6xDdgk2IdLi7RPEFZmfi6NCqdFW85IkdCqBWVnemtHSEgzCX4+Be+WR17tzvrh/2csizSR75uFWlzLkwd8RG4RhiOAaybSomBJRrytIXSZF/ysHyV1IeT1AkxVqR550iji/uPfI4KRWkI8e472LoYY50onICdMJkpWZOxVUoRODxWwJHXa/Jf/PQ4hipjCAusfvHV05fvHysSOdQEiabXgsQod3N2nufPsq7F+MnzPsQ9GXj7ct3gn/NBDoQBEFMgA4EQZkK0IEgKFMBOhAEZSpAB4KgTAXoQBCUqQAdCIIyFaADQVCmAnQgCMpUgA4EQZkK0IEgKFMBOhAEZSpAB4KgTAXoQBCUqQAdCIIyFaADQVCmOiJ05mptGIaz8Wd39qQN+LC/f+9+31IDOjA86n7x3ZvSBjw48HNnB6ADw0X2+5//T9qDj/af5I4PQAeGi+yv955I2/DBg0e5EwTQgeHCeu3qjrQNnzwZ5E4QQAeGi+xiZJQBHRi2xsXIKAM6MGyTC5BRBnRg2DLbnlEGdGDYMtueUQZ0YNg+W51RBnRg2D5bnVEGdGDYStubUQZ0YNhWW5pRBnRg2FZbmlEGdGDYYtuYUQZ0YNhi25hRBnRg2G5bl1EGdGDYetuVUQZ0YNh625VRBnRguAi2KKMM6MBwEWxRRhnQgeGC2JaM8hhC58ZLV7/+x+6Th08Hrc2htbK13+vssD+72/6gtdme29zr+fvrVGG/252rtdc6A3K2t7fac7X2ejfFhel2qf50t32f64++q5t7vf7eGntrrTMImtb1rdfZWesMgkbXu35UGM7LI5VR7jQ/fHv1tYUXfnDmeyfLoSqnnv/xGEHH+VPnrRv9/z4+YIMYJnRqO60+24Rb+36wk5OgM1drr3dFOlAfkctE9Ru8te+TTdfa651Bz/fjHrKq1ru+7w+2t3hUdbfDShhGAxgBOiPjEcko3/18ffWlMxFpJI0DdG5e/PT+vx48Vb6phwqdeAPrIpReZ2duc68nvVLbafUZUzb3ej6xk1NAp7ud4iJyNe+0+iwWM/ER0LHAuWeUr3/wyxe+q+FN4aFz7sPdq7tPHgwONIMYMnQC87s3RaQzV2sH3DH0MB10xIboaCgVm/z+3poIR077LUBnxJxvRvnulTWHi3BOnjl38Td/+fift+8G79767PKbrxUVOnc27x08TRjE0KDDtqicRkkDneiz3f2e75NnoiNCR+GFWPNOqz9obe31+txpS+1n+DoinZF2bhnl3Wu/mo+Jc2rxrb/vEsWKCp0oWGA6OOh19z769Osv4teHG+msdQa9zo4x+8s6IBBB6lUQjAxaHZUatLa32qkjHb51LtXNxzVxCMZlqTjoRAZ0Rsq5ZJRvvvVyHOX88I3LFHHGAToHj/v7rS/+88p70uvq9n7GDqAT/qnLlUTbW77rxJIsVM3y9j7y8SponW9avHvFpmt/XQ6veOhEZ7RMjqtwOueRUe7WX42Zs/D727qShYVOc29wu9Ot/vmm9Ho+0CFuYHH7NjpeEYcgFUl8xCFWHjuEju4ePHdKSiE6RFK4Bo+YM88of7T8fMScs2t/05YsKnR0zgM6W/t+dKsogg4f8siJ5LYx0lGONip0WMAigM9QnpucXp/6iDx1pMCg0XLmGeV3zsf5nAt1fUlAZ4gNhc/OCQ1xHYhAE0LHFHdEoc16VzmLKRCJkruHgc5Oq+9HKWHNQ4a8EelY4NF8RhnQGVYrvU43fuLG7LSRzk6rTx12ZIh0txmkko5XcXlfvNcWftD0zCGgY4dH6hllQGeYt8y5J4z1GrQ2iQ3P+il1b0eLMAk6HMISIh2WQtLedYpubG3pntORhRtYo+YReUYZ0In2fO79geGhO/dnlAEdQAceL4/ar14AOjBcfI9SRrkL6MDwWHhEMsrXL10AdGB4LDwKGeXgPwcFdGB4LJw/dL585/ypov+0BWVABx5Hv/juzdtd4T+yOTjwH+xleLzavbbKfvMC0IHh4jvvRPKN+qunx+JHvCgDOvDY+afv//vhY+HXpZ4+Pbj/IDvifPD62fg/Pz+FRHL+XYLh4fqTm/el/dvvP86KON0rqxxxTp5dvYJb5lk0Wi+dWJic3zCW2ZiaWZpaNtezMTVD1lMvnViZ5l9Zrk7OVKfnl5IajaudmKnO6gosVyfDd+slQ7Fae3Z+iaxnurJQWlQGuxhVCw/R+eaPr1+6cComzo9+3rhxDw8HZtDodGVhcr5aOmFmigKOwMvVyRMLE3qXFttzy9XJSl3+1Ex1tlZPajTs3kSlPju/NCFVItfWpqCzMTVj6t5EpT5X25iakYYWEna6kshi+FjON38s/l7y6fOXbgSvAzrDdbCl52oBPiisBNa9KwFlcUXdpbPzS8EOn5xZ0oKJblcIweQ4ZXEl7rkMnSguk4BChUIRN2eWaIDqYAcf2znmj+9+fuk8F+Q4q9fusrcAnSF6urIgb2MddxZXJsioJBk6VIi0nHxymZ1filqcnV8KwbS4wkGK1axCJ34lGTrK2aqd7iwJH9d55o/ZIzkhcX59pcO9C+gMyXwQwXFhuTpJhR7TlYXJGSoFo0BHDBNWpperJRbglBbrJTWOIOgj54Zi6LB3g+gj5IUCndk4W6RARw6yNqYqLMCp1KcraqQD+gzLueWPuUdyyuXyqVffuS4WAHSG4OXqpLCXpGBEzQcHBTQxS9LxigsclNjEFPLEvBCh0+abm6jUFejwcUqK4xUHKRb18KczQGcozi9/LDySc9JZu6L8PyEAnQysSRIzR0ncWfV+UwAdOp3M+BInR1bSRTqBBehoQo966cTKtAQdAWRBJXQ6mfEl7nAJkU4mzi9/LNwgJ4kD6GTTqBE6QgpZud8UhDZEwMKHGEOLdILYZF6AzpSQo1Fjn9B8nYh0MnZu+eN3Xd3/v5wXoJOBDdCpl6QUj5hsDrduGugsVkvz1SNHOvo7XMZb5uHpLw106lOV6hQineE7z/zxpQspmAPoZNGo6RkcIkcT38niIhfd8arWZkcYLiskRzobUzOL33xZ6sAzgA4XuZhu1QfHt9IiIp0snOfzx4DOyFiTITY8QRO8W2Fp44RIJ2IBD52V0kz0FMxfv/Wdn337jfjjYhKHjD6oG2Hy8zUrymM7QhPR6KYr4bs8dEqVJRGd8DNw/r9fkcKAzhj4F7/9xvfrldy7AQ/Z+f9+BaADw2PlvH+/AtCB4XFy3r9fAejA8Jg519+vAHRgeMxsRf4Y0IHhgtiW/DGgA8MFsS35Y0AHhotgi/LHgA4MF8EW5Y8BHRi23nbljwEdGLbb1uWPAR0YttvW5Y8BHRi22DbmjwEdGLbYNuaPAR0YttWW5o8BHRi20vbmjwEdGLbS9uaPAR0Yts9W548BHRi2z1bnjwEdGLbMtuePAR0YtskFyB8DOjBskwuQPwZ0YNgaFyN/DOjAsDUuRv74uNCBIAg6mgAdCIIyFaADQVCmAnQgCMpUgA4EQZkK0IEgKFMBOhAEZSpAB4KgTPV/gaKbw/Y8R3wAAAAASUVORK5CYII=)
首页我搞懂了border-top:50px solid red;50px指的哪?指的是边框的最外层边到元素本身边的距离,这里需要知道边框的宽度和元素的宽度是无关的,如图2-4指的是边框的宽度二4-5是元素本身宽度,再就是画三角形最关心的是斜边就是1-4和3-5,从图中可以看出当相邻的边框(左上,左下,右上、右下)同时存在时,元素相应方位(4的位置)到两个边框的交点(1)的线段就是两个边框的分界线,这样两个边框形成了平分,那么如果相邻边框只有一个框时怎么办呢?比如图中没有红色的左边框时,那看下图的效果
最后注意一点斜线只会外扩就像1-4连而不是4-3连这再有时画图需要换方式。
开始想直接在网页上保存图片可是这是人家div的背景不知道是图片还是也用的border边框,以前研究过border画三角形这次想自己画推进条试试,感觉这次基本上搞通了border画三角形,这里先讲我总结的原则再讲例子。