纯css画三角形/梯形（兼容ie6）
生活随笔
收集整理的這篇文章主要介紹了
纯css画三角形/梯形（兼容ie6）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼很簡單也很容易理解，及用css盒模型來實現效果
實例：寬高為0的話是三角形，否則是梯形
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.triangle{width: 0;height: 0;border-style: solid;border-color: red transparent transparent transparent;border-width: 12px;}.trapezoidal{width: 12px;height: 12px;border-style: solid;border-color: green transparent transparent transparent;border-width: 12px;}</style> </head> <body><div class="triangle"></div><div class="trapezoidal"></div> </body> </html>效果：當然也可以把另外三遍設為 *背景色*來實現效果，也可以嘗試下把三邊設為不同的顏色，寬度效果也很炫酷
為了兼容ie6，border-style和font-size,line-height，overflow都要改下
#test {height:0;width:0;overflow: hidden; /* 這里設置overflow, font-size, line-height */font-size: 0; /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */line-height: 0; /* 字體大小和行高, 導致盒子呈現被撐開的長矩形 */border-color:#FF9600 #3366ff #12ad2a #f0eb7a;border-style:solid dashed dashed dashed;/*ie6不支持顏色透明，可將邊框設為dotted或dashed*/border-width:20px; }效果同上更通用的，不用考慮兼容性的寫法，用字符實現三角形
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style> .box{height:80px; width: 300px;line-height:80px; border-radius: 10px;margin-bottom:30px; padding-left:2em;background:#f3961c; position:relative; } .diamond{height:60px;line-height:60px; font-size:60px; color:#f3961c; position:absolute; z-index: -1;left:60px; bottom:-30px; } </style> </head> <body><div class="box"><span class="diamond">◆</span>字符法實現底部90度尖角對話框 </div> </body> </html>效果：
氣泡框實例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box{position: relative;width: 100px;height: 60px;line-height: 60px;background: blue;border-radius: 5px;}.box:after{content: "";width: 0;overflow: hidden;border-style: solid;border-color: blue transparent transparent transparent;position: absolute;bottom: -32px;right: 20px;border-width: 12px 6px 20px 18px;}</style> </head> <body><div class="box">hellow word!</div> </div> </body> </html>效果：
參考文章http://caibaojian.com/css-border-triangle.html#t7
總結
以上是生活随笔為你收集整理的纯css画三角形/梯形（兼容ie6）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网络爬虫学习1 - 使用 request
- 下一篇： 微信 图片二维码识别不了的问题