用div+css制作三角形

2018-04-28  本文已影响0人  2c4419e9dafa

直角三角形为例:

右上角的三角形:

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;
上一篇 下一篇

猜你喜欢

热点阅读