css三角形源码

街尾杂货店&2024-12-19 17:08

效果图

如下图所示，让一个 div 变成三角形，并且可随意更改大小，

本文提供了可运行示例源码，直接复制即可。

实现源码

建议创建一个 demo.html 文件，一键复制代码运行。

html 复制代码

<style>
.div{
    width: 0px;
    height: 0px;
    /* 调得越大三角形越大 */
    border-width: 100px;
    /* END */
    border-style: solid;
    border-color: red transparent transparent transparent;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}
</style>

<body>
    <div class="div"></div>
</body>

写在后面

其实实现方法还有很多，如果仅仅是为了展示，本文的方案比较简单粗暴。