今天小编跟大家讲解下有关用CSS属性transparent实现各种三角形示例代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关用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; border-bottom: 40px solid red; border-right: 20px solid transparent; border-left: 20px solid transparent; } .t2{ margin: 40px auto; width: 0px; height: 0px; border-bottom: 40px solid transparent; border-right: 40px solid red; } .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>总结
以上就是这篇文章的全部内容了 希望本文的内容对大家的学习或者工作能带来一定的帮助 如果有疑问大家可以留言交流。
来源：爱蒂网
