其实非常简单，就是设置一个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;
width: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;
width: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;
width: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>
代码很简单，不解释了，
效果图是這样的
