文章

画一个三角形

画一个三角形

发表于 更新于
作者 独行的风
1 分钟阅读

画一个三角形

1616479376198-11893752-e8e4-4f53-b830-b252bf4d0929.jpeg

1
2
3
4
5
6
7

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

1616479376199-ae2350f0-4b2d-4ac3-89bc-e2d084cdb2d5.jpeg

1
2
3
4
5
6
7

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

1616479376195-84167565-f932-440e-81ed-12f41a280cd4.jpeg

1
2
3
4
5
6
7

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

1616479376201-bd418cc1-98f9-49ce-b0d7-e8e5424100c3.jpeg

1
2
3
4
5
6
7

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

1616479376216-09cb304e-4c85-4fc1-b7b7-75b548689a51.jpeg

1
2
3
4
5
6

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

1616479376258-dc3ad1b2-1dc8-4789-8ba6-16e90f6f2225.jpeg

1
2
3
4
5
6

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

1616479376232-ba6011c9-83e4-4f4b-915f-51891a55d82b.jpeg

1
2
3
4
5
6

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

1616479376211-b5c90285-d688-46f6-88fc-71e0265b450a.jpeg

1
2
3
4
5
6

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
Web前端, html-css
html-css
本文由作者按照 CC BY 4.0 进行授权