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

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

相关推荐
Bling_Bling_13 分钟前
【无标题】
前端·网络协议
We་ct4 分钟前
React Diff & Key 核心解析
开发语言·前端·javascript·react.js·前端框架·reactjs·diff
哥本哈士奇5 分钟前
Vue 3 快速入门:从零搭建前后端 CRUD 应用
前端·javascript·vue.js
biubiubiu07066 分钟前
Agent 是如何拥有“手脚”的(ReAct 运行流程)
开发语言·前端·javascript
摸鱼的春哥9 分钟前
Agent教程21:知识图谱🕸,让AI🤖学会联想
前端·javascript·后端
SuperEugene9 分钟前
Vue3 组件拆分实战规范:页面 / 业务 / 基础组件边界清晰化,高内聚低耦合落地指南|Vue 组件与模板规范篇
前端·javascript·vue.js·前端框架
泯泷10 分钟前
阶段二:为什么先设计指令集,编译器和运行时才能稳定对齐?
前端·javascript·架构
Dxy123931021612 分钟前
HTML常用布局详解:从基础到进阶的网页结构指南
前端·html
ywf12152 小时前
前端的dist包放到后端springboot项目下一起打包
前端·spring boot·后端
恋猫de小郭2 小时前
2026,Android Compose 终于支持 Hot Reload 了,但是收费
android·前端·flutter