跳到主要内容

三角形

2025年03月31日
柏拉文
越努力，越幸运

一、认识​

实现思路: 盒子元素内容区 width 和 height 变为 0 之后, 整个盒子大小由四个 border 撑起。此时,内容区相当于一个四个三角形的顶点。所以, 每一个 border 是由三角形组成的。因此,可以通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度和边长。

二、实现​

2.1 上三角形​

实时编辑器
function Test(props) {
    const triangle = {
        width: 0,
        height: 0,
        borderTop: "100px solid #e5c3b2",
        borderLeft: "100px solid transparent",
        borderRight: "100px solid transparent",
    }
    return (
        <div style={ triangle }></div>
    );
}
结果
Loading...

2.2 下三角形​

实时编辑器
function Test(props) {
    const triangle = {
        width: 0,
        height: 0,
        borderBottom: "100px solid #e5c3b2",
        borderLeft: "100px solid transparent",
        borderRight: "100px solid transparent",
    }
    return (
        <div style={ triangle }></div>
    );
}
结果
Loading...

2.3 左三角形​

实时编辑器
function Test(props) {
    const triangle = {
        width: 0,
        height: 0,
        borderLeft: "100px solid #e5c3b2",
        borderTop: "100px solid transparent",
        borderBottom: "100px solid transparent",
    }
    return (
        <div style={ triangle }></div>
    );
}
结果
Loading...

2.4 右三角形​

实时编辑器
function Test(props) {
    const triangle = {
        width: 0,
        height: 0,
        borderRight: "100px solid #e5c3b2",
        borderTop: "100px solid transparent",
        borderBottom: "100px solid transparent",
    }
    return (
        <div style={ triangle }></div>
    );
}
结果
Loading...

2.5 上右三角形​

实时编辑器
function Test(props) {
    const triangle = {
        width: 0,
        height: 0,
        borderTop: "100px solid #e5c3b2",
        borderRight: "100px solid transparent",
    }
    return (
        <div style={ triangle }></div>
    );
}
结果
Loading...

2.6 下右三角形​

实时编辑器
function Test(props) {
    const triangle = {
        width: 0,
        height: 0,
        borderBottom: "100px solid #e5c3b2",
        borderRight: "100px solid transparent",
    }
    return (
        <div style={ triangle }></div>
    );
}
结果
Loading...