CSS-画三角形和梯形总结

1. 知识储备

css画图形，一般采用border来画

为了计算长度方便，将box-sizing: border-box;

它是IE中的盒子模型（别名：怪异盒子模型）

width = border + padding + 内容区宽度

height = border + padding + 内容区高度

不包括margin

而现代浏览器（Google) 中的盒子模型，内容盒子模型

width = 内容区宽度

height = 内容区高度

box-sizing: content-box;

当设置 width = 100px
其  内容宽度 = 100px


box-sizing: border-box;

当设置 width = 100px
其 border + padding + 内容宽度 = 100px

所以当width一样的时候， border-box的内容区宽度一定 <= content-box的内容区宽度

（代码，见最后，两者width都是100px)

2. 等腰直角三角形

 .triangle {
            /* 怪异盒子模型(IE盒子模型) */
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border-top: 100px solid red;
            border-left: 100px solid transparent;
}
        
<div class="triangle"></div>

代码解析：

由于盒子宽度和高度只用100px, 当同时涉资border-top和border-left, 元素就会抢占空间，各占一半。

border-top: 100px solid #f00;
border-left: 100px solid #0f0;

那么只要我们将其中一个三角形的颜色设置成透明即可。

css中transparent代表透明。（注：transparent翻译成中文就是透明）

border-top: 100px solid #f00;
border-left: 100px solid transparent;

就是实现我们之前的效果了。

3. 等腰三角形

原理和上面的类似，我们只需要把宽度设大些，左右border各自挤占掉一部分。

border-top: 100px solid #f00;
border-left: 100px solid #0f0;
border-right: 100px solid rgb(170, 212, 170);

此时只需将两边的border设置为透明，我们的等腰三角形就出现了

当然，你有可能想要把三角形翻过来，只需要将border-top改成border-bottom即可

 border-bottom: 100px solid #f00;
 border-left: 100px solid transparent;
 border-right: 100px solid transparent;

4. 等边梯形

只需在3的代码基础上，把宽度再放大点就可以了。

.triangle {
            /* 怪异盒子模型(IE盒子模型) */
    box-sizing: border-box;
    width: 300px; // 这里只放大了宽度
    height: 100px;
    border-bottom: 100px solid #f00;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    /* border-right: 100px solid transparent;
    border-bottom: 100px solid red; */
}

核心代码展示：

各位可自行练习。

<div class="triangle"></div>

<div class="circle"></div>

<div class="content-box"></div>

<div class="border-box"></div>

<style>
    .triangle {
        /* 怪异盒子模型(IE盒子模型) */
        box-sizing: border-box;
        width: 300px;
        height: 100px;
        border-bottom: 100px solid #f00;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        /* border-right: 100px solid transparent;
        border-bottom: 100px solid red; */
    }

    .content-box {
        /* 
        现代浏览器中的盒子模型，内容盒子模型
        width = padding + 内容区宽度
        height = padding + 内容区高度
        */
        box-sizing: content-box;
        width: 100px;
        height: 100px;
        border: 10px solid red;
        padding: 20px;
        margin: 30px;
        background-color: antiquewhite;
    }

    .border-box {
        /* 
        IE中的盒子模型（别名：怪异盒子模型）
        width = border + padding + 内容区宽度
        height = border + padding + 内容区高度
        不包括margin
        */
        box-sizing: border-box;
        width: 100px;
        height: 100px;
        border: 10px solid red;
        padding: 20px;
        margin: 30px;
        background-color: antiquewhite;
    }
</style>

【前端面试】CSS-画三角形和梯形总结