梯形

2025年03月31日

柏拉文

越努力，越幸运

一、认识

---

实现思路: 通过边框原理实现。内容区 width 给一个宽度值作为梯形的上边; 左右两边边框长度值+内容区宽度值作为梯形的下边,且左右两边边框颜色透明; 作为梯形下边的边框给一个颜色值,并且它的长度作为梯形的高度

二、实现

---

2.1 等腰梯形

实时编辑器

function Test(props) {
    const trapezoid = {
        width: "400px",
        height: "0px",
        borderLeft: "100px solid transparent",
        borderRight: "100px solid transparent",
        borderBottom: "200px solid #e5c3b2",
    }
    return (
        <div style={ trapezoid }></div>
    );
}

结果

Loading...

2.2 直角梯形

实时编辑器

function Test(props) {
    const trapezoid = {
        width: "260px",
        height: "0px",
        borderLeft: "100px solid transparent",
        borderBottom: "200px solid #e5c3b2",
    }
    return (
        <div style={ trapezoid }></div>
    );
}

结果

Loading...