css三角形怎么写6

CSS中的三角形常常用于装饰或指示箭头方向等，以下是几种写法：

/* 1. 用border实现 */
.triangle1 {
    width: 0; 
    height: 0; 
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid transparent;
}

/* 2. 用伪元素实现 */
.triangle2 {
    width: 0; 
    height: 0; 
    border: 50px solid transparent;
    border-bottom-color: red;
    position: relative;
}
.triangle2:before {
    content: "";
    position: absolute;
    top: -50px;
    left: -50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
}

/* 3. 用transform实现 */
.triangle3 {
    width: 0; 
    height: 0; 
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid red;
    transform: rotate(45deg);
}

/* 4. 用clip-path实现 */
.triangle4 {
    width: 50px; 
    height: 50px;
    background-color: red;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 5. 用svg实现 */
.triangle5 {
    width: 100px;
    height: 100px;
}
.triangle5 svg {
    width: 100%;
    height: 100%;
} 

以上就是五种常用的CSS三角形写法，一定要多加练习哦~