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

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

相关推荐
羲云7 小时前
Claude 越界事件之后:Agent 权限设计为什么不能只靠提示词
前端
行者全栈架构师7 小时前
【鸿蒙心迹】鸿蒙网络请求架构实战——@ohos.net.http 到 Axios 封装、拦截器与统一错误处理(HarmonyOS 7.x)
前端·算法·架构
全栈Agent 小李7 小时前
【无标题】
前端·后端·agent·ai编程·全栈·cursor·mcp
羲云7 小时前
别让 AI 凭记忆做调研:给 WorkBuddy 接上可核验的实时搜索
前端
只睡四小时7 小时前
AI 生成 PPTX:11 页课件编译出 429 个形状
javascript·python·pptx·ai生成ppt·ooxml
deli0077 小时前
连接池到底配多大?QPS 和 RT 算一遍,再跑 1 万次请求实测超时率
前端
风花一世月8 小时前
🏮 我把三坊七巷做成了能飞的 3D 地图(901 个真实建筑轮廓、20 处景点,在线直接玩)
前端
特立独行的猫A8 小时前
用仓颉语言写一个串口调试助手:cj-tauri 实战
前端
小凯在掘金8 小时前
Shadow DOM 和 Virtual DOM ?别再傻傻分不清
前端·html
郑州光合科技余经理8 小时前
本地生活平台搭建:跨业态用户标识怎么贯通
java·开发语言·前端·后端·uni-app·php·ai编程