css三角形完成事理
网页中罕有一些三角形 ，形完独霸 CSS 直接画出来便可以 ，成事不必做成图片或字体图标 。形完
一张图，成事 你就晓得 CSS 三角是形完若何来的了, 做法以下 ：
div { width: 0; height: 0; border: 50px solid transparent; border-color: red green blue black; line-height:0; font-size: 0; }我们用css 边框可以模仿三角终局
宽度高度为0
我们4个边框都要写 ， 只保管需求的成事边框色彩 ，此外的形完不克不及省略 ，都改成 transparent 通明就好了
为了赐顾帮衬兼容性 低版本的成事不雅不雅不雅不雅鉴赏器 ，加上 font-size: 0; line-height: 0;
案例 ：京东三角
终局图
代码参考
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS 三角建造</title> <style> .box1 { width: 0; height: 0; /* border: 10px solid pink; */ border-top: 10px solid pink; border-right: 10px solid red; border-bottom: 10px solid blue; border-left: 10px solid green; } .box2 { width: 0; height: 0; border: 50px solid transparent; border-left-color: pink; margin: 100px auto; } .jd { position: relative; width: 120px; height: 249px; background-color: pink; } .jd span { position: absolute; right: 15px; top: -10px; width: 0; height: 0; /* 为了赐顾帮衬兼容性 */ line-height: 0; font-size: 0; border: 5px solid transparent; border-bottom-color: pink; } </style></head><body> <div></div> <div></div> <div> <span></span> </div></body></html>