<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS中border画三角形</title>
<style>
/*
等腰三角形
.sanjiaoxing{
width:0;
height:0;
border-bottom:100px solid yellow;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
倒等腰三角形
.sanjiaoxing{
width:0;
height:0;
border-top:100px solid yellow;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
右为底等腰三角形
.sanjiaoxing{
width:0;
height:0;
border-right:100px solid yellow;
border-bottom:50px solid transparent;
border-top:50px solid transparent;
}
左为底等腰三角形
.sanjiaoxing{
width:0;
height:0;
border-left:100px solid yellow;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
}
左下为底等腰三角形
.sanjiaoxing{
width:0;
height:0;
border-left:100px solid yellow;
border-top:100px solid transparent;
}
.sanjiaoxing{
width:0;
height:0;
border-right:100px solid transparent;
border-bottom:100px solid yellow;
}
右下为底等腰三角形
.sanjiaoxing{
width:0;
height:0;
border-right:100px solid yellow;
border-top:100px solid transparent;
}
.sanjiaoxing{
width:0;
height:0;
border-bottom:100px solid yellow;
border-left:100px solid transparent;
}
*/
</style>
</head>
<body>
<div>
<div class='sanjiaoxing'>
</div>
</div>
</body>
</html>