css三角形源码

效果图

如下图所示,让一个 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>

写在后面

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

相关推荐
liliangcsdn4 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero7 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui10 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴13 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte17 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常18 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常20 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾21 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101824 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28131 分钟前
Chrome插件开发
前端