css三角形怎么写

CSS中实现三角形的方法有多种，下面是其中几种常见的方法：

方法一：使用border属性实现三角形

通过设置元素的四个边框，使其三条边框不显示，只显示一条边框，从而实现三角形效果。

```css

.triangle {

width: 0;

height: 0;

border-width: 50px;

border-style: solid;

border-color: transparent transparent #000 transparent;

}

```

上述代码中，设置了元素的宽度和高度为0，边框宽度为50px，将要显示的边框颜色设置为#000（黑色），其他三条边框的颜色设置为透明。这样就可以实现等边三角形的效果。

方法二：使用旋转和边框实现三角形

通过设置元素的旋转角度和边框属性，将矩形元素旋转45度，只显示其中两条边框，从而实现三角形效果。

```css

.triangle {

width: 0;

height: 0;

border-width: 50px;

border-style: solid;

border-color: #000 transparent transparent transparent;

transform: rotate(45deg);

}

```

上述代码中，设置了元素的宽度和高度为0，边框宽度为50px，将要显示的两个边框颜色设置为#000（黑色），其余两条边框的颜色设置为透明。通过旋转属性将元素旋转45度，从而实现等腰直角三角形的效果。

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

通过创建伪元素，并设置其宽度、高度、边框属性和背景色等样式，实现三角形效果。

```css

.triangle {

position: relative;

width: 100px;

height: 100px;

background-color: #000;

}

.triangle::before {

content: "";

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 0;

border-width: 50px;

border-style: solid;

border-color: transparent transparent #000 transparent；

}

```

上述代码中，首先设置父元素的宽度和高度为100px，并设置背景色为#000（黑色）。然后通过伪元素::before创建一个*定位的伪元素，并将其大小和边框属性设置为与前两个方法相同。通过设置伪元素的位置使其位于父元素的底部，从而实现三角形效果。