主页 > 教程合集 > Html/css >

利用CSS实现三角形的方法

时间:2021-10-26 阅读:0

将一个div的宽度和高度设置为0,然后设置边框样式:


.triangle{
        width: 0;
        height: 0;
        border-top: 50px solid black;
        border-right: 50px solid red;
        border-bottom: 50px solid green;
        border-left: 50px solid blue;
}
 

将一个div的border都设置成50px粗,并且不同颜色,结果如下图所示:

利用CSS实现三角形的方法

把边框宽度设置成50px,计算机处理时,在边框交接处,一边占用一半的面积。

将左右下边框设置成transparent,就可以画出一个三角形:


.triangle{
        width: 0;
        height: 0;
        border-top: 50px solid black;
        border-right: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
}
/*下面代码更加简洁*/
.triangle{
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-top-color: black ;
}
 

结果如下图所示:

利用CSS实现三角形的方法

将下边框的长度设置为0,实现一个最小空间的三角形。

上面产生的三角形,实质上占位还是一个正方形,所以我们应该将这个三角形占用的空间尽可能缩小。不设置下边框:


.triangle{
        width: 0;
        height: 0;
        border-top: 50px solid black;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
}
 

这样就可以实现高度为50px,宽度为100px的三角形,结果如下图所示:

利用CSS实现三角形的方法

同理,可以画出各种三角形:

利用CSS实现三角形的方法

开通特权,即可免费下载全站所有千余TB网络资源,点击 >>> 资源目录 查看所有资源,覆盖音乐、影视、有声书、电子书、漫画、动漫、课程等,不限时间次数,永久免费,点击 >>> 特权详情 了解更多!

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2021-10-26最后更新,转载注明出处。

相关推荐

返回顶部