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

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

相关推荐
二十雨辰1 分钟前
[小结]-线上Bug监控
前端·bug
前端技术3 分钟前
【鸿蒙实战】从零打造智能物联网家居控制系统:HarmonyOS Next分布式能力的完美诠释
java·前端·人工智能·分布式·物联网·前端框架·harmonyos
CHU7290354 分钟前
指尖践行环保——旧衣服回收小程序前端功能玩法详解
前端·小程序
weixin_443478515 分钟前
flutter组件学习之Flex / Expanded弹性布局组件
javascript·学习·flutter
LawrenceLan5 分钟前
38.Flutter 零基础入门(三十八):网络请求实战 http、dio —— 获取列表与刷新 UI
开发语言·前端·flutter·dart
csdn_aspnet26 分钟前
Asp.Net Core 10.0 中的 Blazor 增强功能
前端·后端·asp.net·blazor·.net10
SuperEugene28 分钟前
Excel 上传解析 + 导出实战:Vue+xlsx 避坑指南|Vue生态精选
前端·javascript·vue.js·excel·xlsx·vxetable
小马_xiaoen33 分钟前
常规优化已用尽?小程序体积深层次优化实战!!!
前端·小程序·uniapp
Highcharts.js33 分钟前
使用Highcharts创建流图(Stream Graph)指南|流动数据的可视化图表与数据艺术表达
javascript·信息可视化·数据可视化·highcharts·可视化图表·流图·stream graph
Lee_Yu_Fan35 分钟前
修改ElementUI 框架中 TreeSelect树形选择的Icon
前端·elementui