用CSS属性transparent实现各种三角形示例代码

效果图如下

示例代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            margin: 0;            padding: 0;        }        .box{            margin: 40px auto;            width: 60px;            background-color: #f0ac6b;        }        .t1{            margin: 40px auto;            width: 0px;            height: 0px;            /*background-color: #f0ac6b;*/            border-bottom: 40px solid red;            border-right: 20px solid transparent;            border-left: 20px solid transparent;        }        .t2{            margin: 40px auto;            width: 0px;            height: 0px;            /*background-color: #f0ac6b;*/            border-bottom: 40px solid transparent;            border-right: 40px solid red;            /*border-left: 20px solid transparent;*/        }        .t3{            margin: 40px auto;            width: 0;            height: 0;            border-top: 40px solid red;            border-right: 20px solid transparent;            border-left: 20px solid transparent;        }        .t4{            margin: 40px auto;            width: 0;            height: 0;            border-top: 40px solid transparent;            border-left: 40px solid red;        }        .t5{            margin: 40px auto;            width: 0;            height: 0;            border-top: 40px solid red;            border-right: 40px solid transparent;        }        .t6{            margin: 40px auto;            width: 0px;            height: 0px;            border-left: 40px solid transparent;            border-bottom: 40px solid red;        }        .t7{            margin: 40px auto;            width: 0;            height: 0;            border-left: 40px solid red;            border-bottom: 20px solid transparent;            border-top: 20px solid transparent;        }        .t8{            margin: 40px auto;            width: 0;            height: 0;            border-right: 40px solid red;            border-bottom: 20px solid transparent;            border-top: 20px solid transparent;        }    </style></head><body><div class="box">    <div class="t1"></div>    <div class="t3"></div>    <div class="t2"></div>    <div class="t4"></div>    <div class="t5"></div>    <div class="t6"></div>    <div class="t7"></div>    <div class="t8"></div></div></body></html>