css3 添加三角形

来源：互联网发布：淘宝京东商城汽车模型编辑：程序博客网时间：2024/06/06 07:51
<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style>            .c1 {            width: 0;            height: 0;            border-left: 50px solid transparent;            border-right: 50px solid transparent;            border-bottom: 100px solid blue;        }        .c2 {            width: 0;            height: 0;            border-left: 50px solid transparent;            border-right: 50px solid transparent;            border-top: 100px solid blue;        }        .c3 {            width: 0;            height: 0;            border-top: 50px solid transparent;            border-right: 100px solid blue;            border-bottom: 50px solid transparent;        }        .c4 {            width: 0;            height: 0;            border-top: 50px solid transparent;            border-left: 100px solid blue;            border-bottom: 50px solid transparent;        }        .c5 {            width: 0;            height: 0;            border-top: 100px solid blue;            border-right: 100px solid transparent;        }        .c6 {            width: 0;            height: 0;            border-top: 100px solid blue;            border-left: 100px solid transparent;         }        .c7 {            width: 0;            height: 0;            border-bottom: 100px solid blue;            border-right: 100px solid transparent;        }        .c8{            width: 0;            height: 0;            border-bottom: 100px solid blue;            border-left: 100px solid transparent;        }        </style>    </head>    <body>        <div class="c1"></div>        <div class="c2"></div>        <div class="c3"></div>        <div class="c4"></div>        <div class="c5"></div>        <div class="c6"></div>        <div class="c7"></div>        <div class="c8"></div>    </body></html>/**上述的不同形状可以通过实现一个进而通过，旋转动画来达到希望要求***/
0 0