css实现三角形的几种方式

1.使用边框绘制三角形

通过设置一个元素的宽度和高度为0，然后设置不同边框的颜色和宽度来实现。

<div class="triangle"></div>

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

2. 使用伪元素

可以通过伪元素 ::before 或 ::after 来绘制三角形。

<div class="triangle"></div>

.triangle {
    position: relative;
}

.triangle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

3. 使用clip-path

clip-path 属性允许你创建复杂的裁剪路径，可以用来实现三角形。

<div class="triangle"></div>

.triangle {
    width: 100px;
    height: 100px;
    background-color: green;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

4. 使用CSS渐变

你可以通过CSS渐变来实现三角形。

<div class="triangle"></div>
.triangle {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, transparent 50%, yellow 50%) 0 0,
                linear-gradient(225deg, transparent 50%, yellow 50%) 0 0;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

5. 使用SVG

虽然这不是纯CSS的方法，但你可以将SVG嵌入HTML并使用CSS来控制它。

<svg height="100" width="100">
  <polygon points="50,15 100,100 0,100" style="fill:purple;" />
</svg>

 

边框方法最为简单和常用，但如果需要复杂的形状或更高的灵活性，clip-path 和 SVG 可能更合适。