css绘制向左三角形_纯css 实现三角形

Min_nna

于 2024-02-02 14:33:22 发布

阅读量871

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/Min_nna/article/details/135993313

css 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何利用CSS的border属性创建不同方向的透明三角形效果，通过设置div的边框宽度和透明度来实现视觉上的三角形形状。

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

首先这个思路的讲解就是用到了 border 边框这个属性一个div 可以设置四边边框我们先把其他三条边都去掉只留下一个边框其他在设置底边框的宽度再把内容区域设置为0 就可以了

下面是代码

<div></div>

div {
  width:0;
  height:0;
  border-top:30px solid red ;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
}
 /*左侧三角形 */
div {
  width:0;
  height:0;
  border-top:30px solid transparent;
  border-left:30px solid red;
  border-bottom:30px solid transparent;
}
/右侧三角形/
div {
  width:0;
  height:0;
  border-right:30px solid red;
  border-bottom:30px solid transparent;
  border-top:30px solid transparent;
}
/底部正三角形/
div {
  width:0;
  height:0;
  border-bottom:30px solid red;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
}