如何用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>

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

相关推荐
kyriewen113 分钟前
代码写成一锅粥?这5种设计模式让你的项目“起死回生”
前端·javascript·设计模式·typescript·ecmascript·html5
ywlovecjy5 分钟前
【Nginx 】Nginx 部署前端 vue 项目
前端·vue.js·nginx
skywalk81635 分钟前
g4f JavaScript调用报错问题解决
开发语言·javascript·ecmascript
Alice-YUE6 分钟前
AI对话为什么需要RAG
前端·语言模型·rag
C澒6 分钟前
IntelliPro 企业级产研协作平台:低代码实时预览与可视化编辑技术调研
前端·低代码·ai编程
霍理迪6 分钟前
TS类型断言和类型守卫
前端
木斯佳14 分钟前
前端八股文面经大全:京东前端实习一面(2026-04-16)·面经深度解析
前端
chenxu98b15 分钟前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
Bigger20 分钟前
第十章:我是如何剖析 CLI 里的终极 Agent 能力的(电脑控制与浏览器接管)
前端·claude·源码阅读
coder_liluyao21 分钟前
JS动画函数的封装(很实用)
javascript