其实非常简单，就是设置一个div
让div的宽度和高度都设置为0，
然后为div设置一个border
因为角部位，比如我设置border-left和border-top
角部分是各自占用一半，
所以当我宽度和高度都为0时，不就是一个三角形吗。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <style type="text/css"> #s1{ margin:50px auto; height:200px; 200px; border-left:40px mediumpurple solid; border-right:40px coral solid; border-top:40px lightblue solid; border-bottom:40px lightgreen solid; } #s2{ margin:50px auto; height:0px; 0px; border-left:40px mediumpurple solid; border-right:40px coral solid; border-top:40px lightblue solid; border-bottom:40px lightgreen solid; } #s3{ margin:20px auto; height:0; 0; border-left:100px mediumpurple solid; border-right:100px transparent solid; border-top:100px transparent solid; border-bottom:100px transparent solid; cursor:pointer; } </style> </head> <body> <div id="s1"> <div id="s2"></div> </div> <div id="s3"></div> </body> </html>
代码很简单，不解释了，
效果图是這样的
