纯css实现三角的简单实例

使用纯 CSS 实现三角形的常用方法就是利用 CSS 的 border 属性。在实现三角形之前，需要先了解 CSS 的 border 属性。

border 属性控制一个 HTML 元素的四个边框，即上、右、下、左，它具有以下几个属性值：

• border-width: 边框宽度，默认为 medium。
• border-style: 边框样式，默认为 none。
• border-color: 边框颜色，默认为当前颜色。

具体实现纯 CSS 实现三角形的方法如下：

实现方法一：利用 border 实现三角形

首先，我们需要将左、右边框隐藏，然后给元素加上 border-top 或 border-bottom 来实现三角形。

.triangle {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent #00f transparent;
}

解释：

• width 和 height 都设置为 0，这是为了让三角形只有上、下边框存在；
• border-width 设置为 20px，即为三角形的高度；
• border-style 设置为 solid，即为实线；
• border-color 设置为 transparent transparent #00f transparent，依次为上右下左边框的颜色，其中 #00f 为蓝色，即是三角形的颜色。

实现方法二：使用伪元素实现三角形

另外一个常用的方法是利用伪元素 。以下是一个用伪元素实现三角形的示例代码：

.triangle2 {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ccc;
}
.triangle2:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #00f;
}

解释：

• .triangle2 是一个正方形的容器，宽高分别为 100px，背景颜色为 #ccc；
• .triangle2:before 是一个伪元素，用于生成一个三角形的形状；
• content: ""; 表示空的内容；
• position: absolute; 表示伪元素是绝对定位的；
• bottom: 0; 表示伪元素的底部与容器的底部对齐；
• left: 50%; 表示伪元素的左侧与容器的左侧对齐；
• margin-left: -10px; 表示将伪元素的宽度向左移动 10px，即将三角形的中心点移动到容器的中心；
• width: 0; height: 0; 表示三角形的宽高都为 0；
• border-left: 10px solid transparent; 表示三角形的左侧为透明边框；
• border-right: 10px solid transparent; 表示三角形的右侧为透明边框；
• border-bottom: 10px solid #00f; 表示三角形的底侧为 #00f（蓝色）边框。

示例说明：

以上示例中 .triangle2:before 的位置是利用 position:absolute 和偏移量（bottom 和 margin-left）计算得出的。如果容器的尺寸或边框大小有改变，需要重新计算偏移量。

另外，在这个例子中，我们使用了伪元素来实现三角形。如果需要在一个有多个元素的页面中多次使用三角形的样式，可以考虑使用 CSS 变量来简化代码，避免重复编写样式。

总结：

使用 CSS 的 border 属性和伪元素可以很容易地实现三角形。使用方法一时需要注意上、下边框的方向和颜色设置，而使用方法二时需要计算伪元素的位置和大小。同时，可以使用 CSS 变量来简化代码，提高代码的复用性。