css画三角形（css画三角形箭头）

简介：

CSS（Cascading Style Sheets）是一种标记语言，常用于控制网页的样式和布局。常见的样式包括字体、颜色等，还包括各种图形。本文将介绍如何用 CSS 画出三角形。

多级标题：

一级标题：使用 CSS 画三角形的方法

二级标题：使用 border 属性

三级标题：CSS 画等边三角形

等边三角形可以用 border 属性绘制，如下所示：

```

.triangle {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 50px solid red;

```

其中，width 和 height 设置为 0，表示三角形没有实际尺寸。border-left、border-right 和 border-bottom 依次表示三角形的三条边，可以设置不同的颜色和宽度。

新建一个 HTML 文件，加入上述代码，保存后在浏览器中打开，即可看到一个红色的等边三角形。

四级标题：CSS 画直角三角形

直角三角形可以用 border 属性绘制，只需要让一条边的宽度为 0。例如：

```

.triangle {

width: 0;

height: 0;

border-top: 50px solid red;

border-right: 50px solid transparent;

```

其中，border-top 表示直角三角形的直角边，宽度为 50px，颜色为红色。border-right 表示另一个边，宽度为 50px，颜色为透明。

保存后在浏览器中打开，即可看到一个红色的直角三角形。

五级标题：CSS 画等腰三角形

等腰三角形可以用 border 属性绘制，只需要让两个边的宽度相等。例如：

```

.triangle {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

```

其中，border-left 和 border-right 表示两个等长的斜边，宽度为 50px，颜色为透明。border-bottom 表示底边，宽度为 100px，颜色为红色。

保存后在浏览器中打开，即可看到一个红色的等腰三角形。

六级标题：总结

CSS 画三角形的方法很简单，只需要利用 border 属性即可。通过调整不同边的宽度和颜色，还可以绘制各种各样的三角形。希望这篇文章能够帮助你更好地了解 CSS，加强你的前端技能。