美文网首页
用div+css制作三角形

用div+css制作三角形

作者: 2c4419e9dafa | 来源:发表于2018-04-28 09:28 被阅读0次

直角三角形为例:

右上角的三角形:

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制作三角形

      本文链接:https://www.haomeiwen.com/subject/kkiwlftx.html