CSS画出三角形、直角三角形、梯形、直角梯形_css反直角梯形

实现这些图形都是基于div的border

1.先画出一个名为“box”的div，定义宽度为100px，高度为100px，给它四边都加上一样的border，但是border颜色不一样，看看结果如何？

<div class="box"></div>
1

加上css

.box{
            width: 100px;
            height: 100px;
            border-top: 50px solid orange;
            border-left: 50px solid blue;
            border-right: 50px solid purple;
            border-bottom: 50px solid brown;
        }
1
2
3
4
5
6
7
8

结果：

由此发现，有颜色的都是边框，中间白色的是我们定义的宽为100px，高为100px的div，发现边框形成了一个梯形！！！。

2.再试一下取消设置上边框，看看效果如何

.box{
            width: 100px;
            height: 100px;
            border-left: 50px solid blue;
            border-right: 50px solid purple;
            border-bottom: 50px solid brown;
        }
1
2
3
4
5
6
7

取消了上面的边框，发现有直角梯形，和梯形，这时我们可以想一下如果只设置底部边框，看看效果如何？

3.只设置底部边框，看看能不能出现底部的梯形

.box{
            width: 100px;
            height: 100px;
            border-bottom: 50px solid brown;
        }
1
2
3
4
5

结果发现是没有的，所以要考虑其他的方法，例如设置边框透明，边框大小不变？不知道结果怎么样

4.在2、的基础上设置左右边框透明

.box{
            width: 100px;
            height: 100px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid brown;
        }
1
2
3
4
5
6
7

咦，发现可以耶，梯形由此就可以实现了，这就说明是需要设置边框才可以的，但是需要结合边框透明才可以得到想要的图形，如果想要反向的图形，就设置该方向上的边框有颜色，其他方向上的边框颜色设置透明即可。

5.假设我要上方的梯形，那css应这样设置

.box{
            width: 100px;
            height: 100px;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 50px solid brown;
            border-bottom: 50px solid transparent;
        }
1
2
3
4
5
6
7
8

那是不是说明其他图形也很容易实现！！！

6.再补充以下为什么向下的方向上实现的图形中间会隔出一个空白区域

以获取上方的梯形为例，打开浏览器开发者工具看到

结果发现，实际中定义的div是存在的，只是被我们设置了透明而已，所以才会存在一些一段距离的空白处，是占页面一定位置的。

那现在梯形已经实现了，接下来就实现其他图形，仅提供代码

7.实现直角梯形

.box{
            width: 100px;
            height: 100px;
            border-top: 50px solid transparent;
            border-left: 0px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid orange;
        }
1
2
3
4
5
6
7
8

8.实现三角形

先看看基础图形是如何，在1、的基础上取消设置div的宽高，定义为0px

.box{
            width: 0px;
            height: 0px;
            border-top: 50px solid orange;
            border-left: 50px solid blue;
            border-right: 50px solid purple;
            border-bottom: 50px solid brown;
        }
1
2
3
4
5
6
7
8

结果就是这样，三角形可以在这个的基础上进一步结合透明实现

.box{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid brown;
        }
1
2
3
4
5
6
7
8

9.实现直角三角形

.box{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-left: 0px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid brown;
        }
1
2
3
4
5
6
7
8

好了，CSS实现画出三角形、直角三角形、梯形、直角梯形图形介绍到这了，写这篇博客是想起之前前端笔试碰到了这样的类型的代码题，当时一脸懵逼，还是自己见识太浅了，最近想起来就看看，学习记录一下，避免下次再遇到类似这样的题。

接下来要狂补我的前端知识了！！！

参考文章地址：
https://m.php.cn/article/487896.html