以下是常用的三角形形状
其实都是html+css就能实现，很简单
代码如下：
第一种方法
html代码：
复制代码代码如下:<!– 向上 –><div class=”top_triangle”></div><!– 向下 –><div class=”bottom_triangle”></div><!– 向左 –><div class=”left_triangle”></div><!– 向右 –><div class=”right_triangle”></div>
css代码
复制代码代码如下:/*向上*/ .top_triangle{ width:0;
在CSS世界中，绘制图形并非只能借助复杂的JavaScript或者图片，而是可以通过简单的CSS属性来实现，尤其是绘制三角形。本文将详细介绍如何利用CSS绘制三角形及其拓展应用。
CSS绘制三角形的核心在于巧妙运用边框(border)。由于边框可以有不同的颜色和宽度，通过设置元素的宽高为0，我们可以仅保留特定方向的边框颜色，从而形成三角形。以下是四种基本方向的三角形的实现方式：
1. 向上三角形：
```css
.top_triangle {
width: 0;
height: 0;
border-bottom: 30px solid green;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
}
```
2. 向下三角形：
```css
.bottom_triangle {
width: 0;
height: 0;
border-top: 30px solid black;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
}
```
3. 向左三角形：
```css
.left_triangle {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-left: 30px solid yellow;
border-bottom: 30px solid transparent;
}
```
4. 向右三角形：
```css
.right_triangle {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid red;
border-bottom: 30px solid transparent;
}
```
上述代码中，每个三角形都是通过设置宽度和高度为0，然后利用非透明边框创造出三角形的形状。透明边框使得它们“消失”，而有颜色的边框则形成三角形的边缘。你可以根据需要调整边框的宽度和颜色，以创建不同大小和颜色的三角形。
此外，还有一种更简洁的写法，即通过设置一个元素的所有边框，并隐藏其中某些边框，只保留特定方向的边框颜色。例如，实现向上三角形的CSS代码：
```css
.top_triangle {
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom: 30px solid green;
}
```
这种方法同样适用于其他方向的三角形，只需更改对应边框的颜色即可。
值得注意的是，尝试改变边框数量或方向时，你会注意到，当设置一个或两个相邻方向的边框值时，三角形可能不会显示，因为它们相互重叠或抵消。只有当设置不同方向的两个边框时，才会形成一个新的形状。这种技巧可以用来创造更多有趣的图形。
对于更高级的CSS图形，如圆形等，可以结合使用`border-radius`属性。例如，以下代码创建了一个红色的“笑脸”图形：
```css
.eatFace {
width: 0;
height: 0;
border: 30px solid red;
border-radius: 50%;
border-right: 30px solid transparent;
}
```
这里，`border-radius: 50%`创建了一个圆形的基础，然后通过设置透明的右边框，使圆形的一部分消失，形成一个开口。
CSS绘制三角形是一种高效且灵活的方法，它利用了边框的特性，可以轻松创建各种形状。熟练掌握这种方法，不仅可以提升网页设计的灵活性，还能在实现特定布局或动画效果时发挥重要作用。通过实践和探索，你会发现CSS绘制图形的世界充满了无限可能。
