這次帶給大家用transparent做出三角形,用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> <p class="box"> <p class="t1"></p> <p class="t3"></p> <p class="t2"></p> <p class="t4"></p> <p class="t5"></p> <p class="t6"></p> <p class="t7"></p> <p class="t8"></p> </p> </body> </html>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是用transparent做成三角形的詳細內容。更多資訊請關注PHP中文網其他相關文章!