如何用CSS3画一个三角形?

要用 CSS3 画一个三角形,可以利用元素的边框和透明边框的特性来实现。以下是一个简单的示例代码:

复制代码
.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent; /* 左边框为透明,控制三角形的左斜边 */
    border-right: 50px solid transparent; /* 右边框为透明,控制三角形的右斜边 */
    border-bottom: 100px solid #f00; /* 底边框为实色,控制三角形的底边 */
}

在这个示例中,我们创建了一个宽度为 0、高度为 0 的元素,并设置了三个边框,分别控制三角形的左斜边、右斜边和底边。通过调整边框的宽度和颜色,可以绘制出不同样式的三角形。

你可以将上述代码应用到一个 HTML 元素上,例如:

复制代码
 <div class="triangle"></div>

这样就可以在页面上展示一个三角形。

相关推荐
小码哥_常10 分钟前
前端图片压缩实战——我把网站图片体积砍了 70%
前端
易朵朵14 分钟前
Z-index
css
张一凡9323 分钟前
把“不要乱改”从提示词里拿出来,放进可校验的提案里
前端·后端·架构
木子欢儿27 分钟前
Debian 13 + vsftpd 搭建FTP服务
linux·服务器·前端·网络·debian
leeguoo28 分钟前
让 Claude Code / Codex 用上你已登录的 Chrome
前端·chrome·ai编程
天蒙蒙亮1 小时前
打安卓apk包+“应用商城”发布
前端·uni-app
Lank_M1 小时前
视频压到指定大小总超一截?码率控制的误差拆开看
前端
用户2054555788001 小时前
飞书运费台账同步到 MySQL:单一策略落地教程
前端
LEE1 小时前
别把 Agent 架构画成组织架构图——子代理该不该拆,用任务级 Eval 说话
前端·后端·ai编程
梦醒江南1 小时前
RAG 证据链验收:别只测答案像不像,要证明它从哪里来
前端·agent·ai编程