css必学之画三角形当初面试的时候，有两家公司考过这道题，其中有腾讯。我当时是裸面，没有看过这个题，当时绞尽脑汁也想到了

当初面试的时候，有两家公司考过这道题，其中有腾讯。我当时是裸面，没有看过这个题，当时绞尽脑汁也想到了几种方法，后期再来查询，发现这个如此简单。此题出现的概率很大，大家可以看看哈。

先上代码，大家可以复制到本地运行，也方便调试理解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画三角形</title>
    <style>
        .div1 {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid green;
        }
    </style>
</head>
<body>
    <div class="div1">
    </div>
</body>
</html>

展示实际效果图

总结

刚开始是比较难想这个border咋这样就实现了呢
我来把代码改一下

.div1 {
    width: 10px;
    height: 10px;
    background-color: #333;
    border-left: 50px solid red;
    border-right: 50px solid yellow;
    border-bottom: 100px solid green;
    border-top: 100px solid green;
}

看一下改变之后的效果图

将中间的元素宽高都变没，border-top 或者 border-bottom 去掉，就可以得到三角形了

重点：该题的出现概率比较高，大家一定要掌握，因为css能问的也没几个。