纯CSS绘制三角形（多个角度）

最新推荐文章于 2022-05-24 12:50:08 发布

原创最新推荐文章于 2022-05-24 12:50:08 发布 · 615 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了如何使用CSS3绘制不同类型的三角形，包括上三角、下三角、左三角、右三角、左上三角、右上三角、左下三角和右下三角，提供了具体的HTML代码和CSS样式。

运用CSS3绘制三角形的方法

HTML代码：

[html] view plain copy print ?

<div class="triangle"></div>

这里的div也可以写span p 等元素替代

1、上三角

[html] view plain copy print ?

.box{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #2894d2;
}

2、下三角

[html] view plain copy print ?

.box{ 
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #2894d2;
}

3、左三角

[html] view plain copy print ?

.box{
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid #2894d2;
  border-bottom: 50px solid transparent;
}

4、右三角

[html] view plain copy print ?

.box{
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid #2894d2;
  border-bottom: 50px solid transparent;
}

5、左上三角

[html] view plain copy print ?

.box{
  width: 0;
  height: 0;
  border-top: 100px solid #2894d2;   
  border-right: 100px solid transparent;
}

6、右上三角

[html] view plain copy print ?

.box{
  width: 0;
  height: 0;
  border-top: 100px solid #2894d2;  
  border-left: 100px solid transparent; 
}

7、左下三角

[html] view plain copy print ?

.box{
  width: 0;
  height: 0;
  border-bottom: 100px solid #2894d2;
  border-right: 100px solid transparent;
}

8、右下三角

[html] view plain copy print ?