css如何写小三角形

在前端开发中，经常会遇到需要插入小三角形的需求。而使用 CSS 可以很轻松地实现这一效果。

首先，我们可以使用伪元素 `before` 或 `after` 来实现小三角形。伪元素是 CSS 提供的一种不属于 HTML 元素，但可以在元素前后插入内容的机制。

下面，我们使用 `before` 伪元素来实现一个朝右的小三角形：

    .triangle-right:before {
        content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid black; /* 小三角形的颜色 */
        vertical-align: middle; /* 默认是baseline对齐，垂直居中需要设置 */
    }

解析一下上面的 CSS 代码：

• `content`：伪元素的内容为空，此处使用空字符串。
• `display`：设置伪元素的 display 属性为 inline-block，使得伪元素可以像普通的 HTML 元素一样布局。
• `width` 和 `height`：分别设置为 0，因为小三角形的大小是由边框的大小决定的。
• `border`：设置 3 条边框，分别是 top、bottom 和 left。这里只设置了 left 边框，边框的大小为 6px，颜色为黑色。
• `vertical-align`：因为伪元素默认是和父元素的 baseline 对齐的，所以需要将其设置为垂直居中。

如果要实现其它方向的小三角形，只需要修改对应的 `border` 属性即可。

总结：使用 CSS 写小三角形的方法其实非常简单，只需要借助 `border` 和伪元素 `before` 或 `after` 即可实现，是前端开发中的常用技巧之一。