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

前端  /  管理员 发布于 7年前   141

效果图如下

示例代码

<!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>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。


  • 上一条：
    利用css代码实现纸飞机效果实例源码
    下一条：
    利用CSS实现书签效果实例源码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客