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

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

相关推荐
2501_9445264214 小时前
Flutter for OpenHarmony 万能游戏库App实战 - 笑话生成器实现
android·javascript·python·flutter·游戏
请叫我聪明鸭14 小时前
基于 marked.js 的扩展机制,创建一个自定义的块级容器扩展,让内容渲染为<div>标签而非默认的<p>标签
开发语言·前端·javascript·vue.js·ecmascript·marked·marked.js插件
悟能不能悟14 小时前
Gson bean getxxx,怎么才能返回给前端
java·前端
2501_9447114314 小时前
前端向架构突围系列 - 工程化(五):企业级脚手架的设计与落地
前端·架构
Apex Predator14 小时前
本地库导入到nexus
java·服务器·前端
趁着年轻吃点苦15 小时前
宝塔面板部署指南
前端
2501_9445264215 小时前
Flutter for OpenHarmony 万能游戏库App实战 - 21点游戏实现
android·javascript·flutter·游戏·harmonyos
0思必得015 小时前
[Web自动化] Selenium中Select元素操作方法
前端·python·selenium·自动化·html
Duang007_15 小时前
【万字学习总结】API设计与接口开发实战指南
开发语言·javascript·人工智能·python·学习
一叶星殇15 小时前
C# .NET 如何解决跨域(CORS)
开发语言·前端·c#·.net