用div+css制作三角形

直角三角形为例:

右上角的三角形:

position: absolute;
right:0px;
top:0px;
width:0.5*$height;
height: 0.5*$height;
border-top: 60px solid red;
border-left: 60px solid transparent;

左上角的三角形

position: absolute;
left:0px;
top:0px;
width:0.5*$height;
height: 0.5*$height;
border-top: 60px solid red;
border-right: 60px solid transparent;

左下角的三角形

position: absolute;
left:0px;
bottom:0px;
width:0.5*$height;
height: 0.5*$height;
border-bottom: 60px solid red;
border-right: 60px solid transparent;

右下角的三角形

position: absolute;
right:0px;
bottom:0px;
width:0.5*$height;
height: 0.5*$height;
border-bottom: 60px solid red;
border-left: 60px solid transparent;

你可能感兴趣的:(用div+css制作三角形)