lhs的个人博客

# 三角形(triangle)的css画法

图1

.top{
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 40px solid skyblue;
}
.left {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-right: 80px solid skyblue;
}

.right {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-left: 80px solid skyblue;
}

.bottom {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 80px solid skyblue;
}

图2

.topLeft {
    width: 0;
    height: 0;
    border-top: 80px solid skyblue;
    border-right: 80px solid transparent;
}

.topRight {
    width: 0;
    height: 0;
    border-top: 80px solid skyblue;
    border-left: 80px solid transparent;
}

.bottomLeft {
    width: 0;
    height: 0;
    border-bottom: 80px solid skyblue;
    border-right: 80px solid transparent;
}

.bottomRight {
    width: 0;
    height: 0;
    border-bottom: 80px solid skyblue;
    border-left: 80px solid transparent;
}

←