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

最新推荐文章于 2023-04-11 10:00:22 发布

原创最新推荐文章于 2023-04-11 10:00:22 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

16 篇文章

订阅专栏

本文详细介绍了如何利用CSS3绘制不同类型的三角形，包括上三角、下三角、左三角、右三角等，并提供了相应的HTML代码实现。

运用CSS3绘制三角形的方法

HTML代码：

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

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

1、上三角

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

2、下三角

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

3、左三角

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

4、右三角

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

5、左上三角

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

6、右上三角

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

7、左下三角

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

8、右下三角

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