css案例：三角形制作

css案例：三角形制作

知识普及：

transparent:用来指定全透明的色彩

关于border四个参数：

• 顺序：上↑ 右→ 下↓ 左←
• 形状：在可视平面上形成四个三角形

.example{
    width: 0;
    height: 0;
    border: solid;
    border-width: 50px 100px 50px 100px;
    border-color: red yellow blue black;
}

​ 效果：

实现思路：

根据三角形方向进行选择设置，将不需要展示的方向设置为透明

案例实现：一个 底50*高50 的向右的三角形

代码：

.triangle{
    width: 0;
    height: 0;
    border: solid;
    border-width: 25px 0 25px 50px;
    border-color: transparent transparent transparent #000;
}

效果：

---

运用实例一：实现一个梯形

可以看成是一个长方形缺了一个角

画一个长方形，然后在右下角用绝对定位贴上一个三角形，上面所做的三角形是个等腰三角形，割一半，就完事了~

成果：

代码：

    <p>案例一</p>
    <div class="line">
        <div class="chang"></div>
        <div class="san"></div>
    </div>
    

    .line{
            background-color: blue;
            width: 300px;
            height: 30px;
            position: relative;
            margin-left: 40px;
            overflow: hidden;
        }
    .chang{
        width: 100%;    
    }
    .san{
        position: absolute;
        border: solid;
        border-width: 10px 20px 10px 20px;
        width: 0;
        height: 0;
        right: 0;
        bottom: -10px;
        border-color: blue red blue blue;
    }