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

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

相关推荐
!win !2 分钟前
免费的个人网站托管-PinMe篇
前端·前端工具
牧天白衣.3 分钟前
CSS中linear-gradient 的用法
前端·css
军军36018 分钟前
Git大型仓库的局部开发:分步克隆 + 指定目录拉取
前端·git
前端李二牛23 分钟前
Vue3 特性标志
前端·javascript
coding随想29 分钟前
JavaScript事件处理程序全揭秘:从HTML到IE的各种事件绑定方法!
前端
搞个锤子哟29 分钟前
关键词匹配,过滤树
前端
掘金安东尼1 小时前
字节前端三面复盘:基础不花哨,代码要扎实(含高频题解)
前端·面试·github
吃奥特曼的饼干1 小时前
React useEffect 清理函数:别让依赖数组坑了你!
前端·react.js
烛阴1 小时前
TypeScript 函数重载入门:让你的函数签名更精确
前端·javascript·typescript
前端老鹰1 小时前
HTML <meta name="color-scheme">:自动适配系统深色 / 浅色模式
前端·css·html