目录

​​教学​​

​​       思路​​

​​       答案 ​​

​​       理解​​

​​       疑问​​

​​                为什么不直接设置一个边框一个三角形​​

​​                宽高为什么设置为0，和不设置宽高的区别​​

教学

        思路

            加粗边框，设置一个宽高为0的中心点，通过对角线划分的切割法，就得到了四个三角形，然后三个透明就可以得到一个三角形 。

        答案 

<style>
    div {
        width: 0px;
        height: 0px;
        border: 100px solid transparent;
        border-bottom-color: red;
    }
</style>

<body>
    <div></div>
</body>

【前端基础面试题】如何用CSS画一个三角形（详解）_web app

        理解

                        

<style>
    #square {
        width: 200px;
        height: 200px;
        background-color: red;
        margin-bottom: 20px;
    }

    #square1 {
        width: 0px;
        height: 0px;
        border: 100px solid red;
    }
</style>

<body>
    <div id="square"></div>
    <div id="square1"></div>
</body>

               

【前端基础面试题】如何用CSS画一个三角形（详解）_web app_02

                这段代码显示两个红色的正方形，第一个就是大小的红色正角形，第二个则是由边框构成的正方形，两个正方形大小一样，左右上下边框各一对，一个边框100px一对200px，两个正方形大小一样。

                我们分别改变一下边框的颜色，以便更好的观看，

                

#square1 {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-right: 100px solid blue;
        border-left: 100px solid yellow;
        border-top: 100px solid green;
    }

                        

【前端基础面试题】如何用CSS画一个三角形（详解）_javascript_03

                 由四个三角形边框组成的正方形，沿着对角形切割而成的四个三角形。

                我们只需要将另外三个三角形设置成透明（transparent），就变成了一个三角形。

                

#square1 {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
        border-left: 100px solid transparent;
        border-top: 100px solid transparent;
    }

    /* 优化 */
    #square1 {
        width: 0px;
        height: 0px;
        border: 100px solid transparent;
        border-bottom-color: red;
    }

                

【前端基础面试题】如何用CSS画一个三角形（详解）_宽高_04

 

                这样就得到一个三角形了！ 

         疑问

                为什么不直接设置一个边框一个三角形

                                

<style>
    #square1 {
        width: 0px;
        height: 0px;
        border-bottom: 100px solid red;

    }
</style>

<body>
    <div id="square1"></div>
</body>

               这样设置的话什么都不会显示，我就不截图了，设置的单条边框跟宽度一样没有。所以不会设置一条边框，就变成三角形。

               宽高为什么设置为0，和不设置宽高的区别

                        我们把宽度高度取消，单设置一条边框。

                

<style>
    #square1 {
        border-bottom: 100px solid red;
    }
</style>

<body>
    <div id="square1"></div>
</body>

【前端基础面试题】如何用CSS画一个三角形（详解）_web app_05

            结果就是一条高度100px的线条，宽度不知道是多少，div的默认宽度为父元素的100%，也就是占了body的宽度，

        

【前端基础面试题】如何用CSS画一个三角形（详解）_javascript_06

 这是不设置宽高 光设置边框的结果，所以为了得到任意四个三角形的一个  我们要设置 宽高，将宽高设置成0px，缩小中心点让它变成三角形而不是梯形，也改变了默认的100%宽度属性。