css怎么绘制一个三角形

说在前面

🎈在CSS中画三角形通常利用border属性来实现,通过设置三个边的宽度为0,并为一个边提供颜色,结合transform属性进行旋转,可以创建一个三角形。以下是几种常见的CSS三角形的实现方法:

方法1:使用border

html 复制代码
<div class="triangle"></div>
<style>
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent red transparent;
}
</style>

上面代码中,.triangle类创建了一个红色的三角形,其中border-width定义了三角形的三个宽度,最后一个宽度定义了三角形的底边,其他三个宽度设置为0,以形成三角形的尖角。border-color定义了三角形的颜色,除了底边颜色外,其他三个颜色设置为transparent(透明)。得到的三角形如下:

方法2:使用clip-path

html 复制代码
<div class="triangle-clip"></div>
<style>
.triangle-clip {
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  height: 100px;
  width: 100px;
  background-color: red;
}
</style>

上面代码中,.triangle-clip类使用clip-path属性来裁剪元素,形成一个三角形。polygon函数定义了三角形的三个顶点。得到的三角形如下:

方法3:使用:before伪元素

html 复制代码
<div class="triangle-before"></div>
<style>
.triangle-before::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent red transparent;
}
</style>

上面代码中,.triangle-before::before伪元素创建了一个红色的三角形,其中border-width定义了三角形的三个宽度,最后一个宽度定义了三角形的底边,其他三个宽度设置为0,以形成三角形的尖角。border-color定义了三角形的颜色,除了底边颜色外,其他三个颜色设置为transparent(透明)。得到的三角形如下:

方法4:使用::after伪元素

html 复制代码
<div class="triangle-after"></div>
<style>
  .triangle-after::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 100px 50px;
    border-color: transparent transparent red transparent;
  }
</style>

上面代码中,.triangle-after::after伪元素创建了一个红色的三角形,其中border-width定义了三角形的三个宽度,最后一个宽度定义了三角形的底边,其他三个宽度设置为0,以形成三角形的尖角。border-color定义了三角形的颜色,除了底边颜色外,其他三个颜色设置为transparent(透明)。得到的三角形如下:

方法5:使用svg

html 复制代码
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,0 100,100 0,100" fill="red" />
</svg>

得到的三角形如下: 在上面代码中,SVG的poygon元素用于创建一个三角形,points属性定义了三角形的三个顶点。得到的三角形如下: l

方法6:使用绝对定位+伪元素

html 复制代码
<div class="position-triangle"></div>
<style>
.position-triangle {
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 100px;
}
.position-triangle::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: red;
  transform: rotate(45deg);
  transform-origin: center;
  top: 50%;
}
</style>

这个需要我们自己调整容器和伪元素的宽高、角度及定位来形成我们想要的三角形,上面代码得到的三角形如下:

公众号

关注公众号『前端也能这么有趣』,获取更多有趣内容。

说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

相关推荐
程序员码歌10 小时前
零代码AI编程实战-热搜从0到1技术方案
前端·ai编程·cursor
kk不中嘞11 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
服务端技术栈11 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
一个很老的小萌新11 小时前
json 解析 [{“id“:1,“name“:“apple“},{“id“:2,“name“:“banana“}]
java·前端·json
yanlele11 小时前
前端面试第 78 期 - 2025.09.07 更新 Nginx 专题面试总结(12 道题)
前端·javascript·面试
影子信息12 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
拜无忧12 小时前
完美圆角,渐变边框,兼容chrome 60,两层背景的视觉差
前端·css
徐小夕12 小时前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
wangbing112512 小时前
界面规范8-文字
前端·javascript·html
盛夏绽放12 小时前
抽成独立组件库:微前端架构下公共组件共享的最佳实践
前端·有问必答