CSS 实战: 纯 CSS 画三角形

最新推荐文章于 2025-03-10 17:30:39 发布

超悠閒

最新推荐文章于 2025-03-10 17:30:39 发布

阅读量866

点赞数 2

分类专栏： HTML & CSS 文章标签： css css3 html 三角形

本文链接：https://blog.csdn.net/weixin_44691608/article/details/122291245

版权

HTML & CSS 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了如何使用CSS的border属性，通过调整边长和透明度创建不同形状和尺寸的三角形，包括正三角、斜三角和扭曲变形。通过实例代码展示，适合前端开发者提升CSS技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 实战: 纯 CSS 画三角形

实现技术核心: Border 属性基础

使用 CSS 实现三角形的基础在于 Border 属性

首先我们先来看基础的 border 使用

#t1 {
  border-top: 20px solid blue;
  border-right: 20px solid green;
  border-bottom: 20px solid yellow;
  border-left: 20px solid red;
}
#t11 {
  border: 20px solid transparent;
  border-top: 20px solid blue;
}
#t12 {
  border: 20px solid transparent;
  border-right: 20px solid green;
}
#t13 {
  border: 20px solid transparent;
  border-bottom: 20px solid yellow;
}
#t14 {
  border: 20px solid transparent;
  border-left: 20px solid red;
}

border 属性实际上是填满由 content 内容部分到外边框的四个梯形所组成，因此如果将 width、height 属性置为 0，就可以产生三角形的效果。

记得其他三个边一样必须设置宽度，否则宽、高塌陷之后就不会出现图形

改变高度、宽度

如果我们想要自由控制高度，则是改变某一边 border 的宽度

#t21 {
  border: 20px solid transparent;
  border-top: 50px solid transparent;
  border-bottom: 10px solid green;
}
#t22 {
  border: 20px solid transparent;
  border-top: 40px solid transparent;
  border-bottom: 20px solid green;
}
#t23 {
  border: 20px solid transparent;
  border-top: 30px solid transparent;
  border-bottom: 30px solid green;
}
#t24 {
  border: 20px solid transparent;
  border-top: 20px solid transparent;
  border-bottom: 40px solid green;
}
#t25 {
  border: 20px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 50px solid green;
}

改变宽度则比较不一样，我们则是要改变与三角形高度垂直的两个方向的透明 border 的高度

#t31 {
  border: 20px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 20px solid green;
}
#t32 {
  border: 20px solid transparent;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid green;
}
#t33 {
  border: 20px solid transparent;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid green;
}
#t34 {
  border: 20px solid transparent;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 20px solid green;
}
#t35 {
  border: 20px solid transparent;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 20px solid green;
}

扭曲变形

最后一种，我们前面的三角形都是正中，如果想要出现直角三角形或是其他角度的三角形，则要同时使用上面提过的垂直方向的透明 Border 高度

#t41 {
  border-top: 0;
  border-left: 0;
  border-right: 40px solid transparent;
  border-bottom: 40px solid green;
}
#t42 {
  border-top: 0;
  border-left: 10px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 40px solid green;
}
#t43 {
  border-top: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid green;
}
#t44 {
  border-top: 0;
  border-left: 30px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 40px solid green;
}
#t45 {
  border-top: 0;
  border-left: 40px solid transparent;
  border-right: 0;
  border-bottom: 40px solid green;
}