[{"data":1,"prerenderedAt":362},["ShallowReactive",2],{"blog-\u002Fblog\u002Ffrontend_web_css_triangle_example":3},{"id":4,"title":5,"body":6,"category":349,"cover":350,"csdn":350,"date":351,"description":5,"draft":352,"extension":353,"meta":354,"navigation":355,"path":356,"seo":357,"stem":358,"tags":359,"updated":350,"__hash__":361},"blog\u002Fblog\u002Ffrontend_web_css_triangle_example.md","前端 web css 三角形实例",{"type":7,"value":8,"toc":339},"minimark",[9,51,142,147,155,159,164,169,173,177,180,313,318,323,335],[10,11,16],"pre",{"className":12,"code":13,"language":14,"meta":15,"style":15},"language-html shiki shiki-themes github-dark","\u003Cdiv class=\"triangle\">\u003C\u002Fdiv>\n","html","",[17,18,19],"code",{"__ignoreMap":15},[20,21,24,28,32,36,39,43,46,48],"span",{"class":22,"line":23},"line",1,[20,25,27],{"class":26},"s95oV","\u003C",[20,29,31],{"class":30},"s4JwU","div",[20,33,35],{"class":34},"svObZ"," class",[20,37,38],{"class":26},"=",[20,40,42],{"class":41},"sU2Wk","\"triangle\"",[20,44,45],{"class":26},">\u003C\u002F",[20,47,31],{"class":30},[20,49,50],{"class":26},">\n",[10,52,56],{"className":53,"code":54,"language":55,"meta":15,"style":15},"language-css shiki shiki-themes github-dark",".triangle {\n  height: 0;\n  width: 0;\n  border: 50px solid #fff;\n  border-bottom: 50px solid red;\n}\n","css",[17,57,58,66,82,94,117,136],{"__ignoreMap":15},[20,59,60,63],{"class":22,"line":23},[20,61,62],{"class":34},".triangle",[20,64,65],{"class":26}," {\n",[20,67,69,73,76,79],{"class":22,"line":68},2,[20,70,72],{"class":71},"sDLfK","  height",[20,74,75],{"class":26},": ",[20,77,78],{"class":71},"0",[20,80,81],{"class":26},";\n",[20,83,85,88,90,92],{"class":22,"line":84},3,[20,86,87],{"class":71},"  width",[20,89,75],{"class":26},[20,91,78],{"class":71},[20,93,81],{"class":26},[20,95,97,100,102,105,109,112,115],{"class":22,"line":96},4,[20,98,99],{"class":71},"  border",[20,101,75],{"class":26},[20,103,104],{"class":71},"50",[20,106,108],{"class":107},"snl16","px",[20,110,111],{"class":71}," solid",[20,113,114],{"class":71}," #fff",[20,116,81],{"class":26},[20,118,120,123,125,127,129,131,134],{"class":22,"line":119},5,[20,121,122],{"class":71},"  border-bottom",[20,124,75],{"class":26},[20,126,104],{"class":71},[20,128,108],{"class":107},[20,130,111],{"class":71},[20,132,133],{"class":71}," red",[20,135,81],{"class":26},[20,137,139],{"class":22,"line":138},6,[20,140,141],{"class":26},"}\n",[143,144,146],"h2",{"id":145},"效果图","效果图：",[148,149,150],"p",{},[151,152],"img",{"alt":153,"src":154},"在这里插入图片描述","https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F024b54ec5b4e67ee62036dd0c89fbf5f.png",[143,156,158],{"id":157},"实际应用模仿-apple-购物袋","实际应用：（模仿 apple 购物袋）",[148,160,161],{},[151,162],{"alt":153,"src":163},"https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F8ebfa59f7d12a3cd63010bd75e5a5830.png",[148,165,166],{},[151,167],{"alt":153,"src":168},"https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002Fae7711947fc570933d9f285e27201f07.png",[143,170,172],{"id":171},"但是有圆角所以放弃上述方案","但是有圆角。。。所以放弃上述方案",[143,174,176],{"id":175},"启动-plan-b","启动 PLAN B",[148,178,179],{},"将 白色 矩形 加一点圆角 旋转45度 就可以了；",[10,181,183],{"className":53,"code":182,"language":55,"meta":15,"style":15},".small-b-menu-triangle {\n  position: absolute;\n  right: 17.5px;\n  top: -4.5px;\n  border-radius: 1px;\n  height: 10px;\n  width: 10px;\n  background-color: #fff;\n  transform: rotate(45deg);\n}\n",[17,184,185,192,204,218,232,246,259,272,285,308],{"__ignoreMap":15},[20,186,187,190],{"class":22,"line":23},[20,188,189],{"class":34},".small-b-menu-triangle",[20,191,65],{"class":26},[20,193,194,197,199,202],{"class":22,"line":68},[20,195,196],{"class":71},"  position",[20,198,75],{"class":26},[20,200,201],{"class":71},"absolute",[20,203,81],{"class":26},[20,205,206,209,211,214,216],{"class":22,"line":84},[20,207,208],{"class":71},"  right",[20,210,75],{"class":26},[20,212,213],{"class":71},"17.5",[20,215,108],{"class":107},[20,217,81],{"class":26},[20,219,220,223,225,228,230],{"class":22,"line":96},[20,221,222],{"class":71},"  top",[20,224,75],{"class":26},[20,226,227],{"class":71},"-4.5",[20,229,108],{"class":107},[20,231,81],{"class":26},[20,233,234,237,239,242,244],{"class":22,"line":119},[20,235,236],{"class":71},"  border-radius",[20,238,75],{"class":26},[20,240,241],{"class":71},"1",[20,243,108],{"class":107},[20,245,81],{"class":26},[20,247,248,250,252,255,257],{"class":22,"line":138},[20,249,72],{"class":71},[20,251,75],{"class":26},[20,253,254],{"class":71},"10",[20,256,108],{"class":107},[20,258,81],{"class":26},[20,260,262,264,266,268,270],{"class":22,"line":261},7,[20,263,87],{"class":71},[20,265,75],{"class":26},[20,267,254],{"class":71},[20,269,108],{"class":107},[20,271,81],{"class":26},[20,273,275,278,280,283],{"class":22,"line":274},8,[20,276,277],{"class":71},"  background-color",[20,279,75],{"class":26},[20,281,282],{"class":71},"#fff",[20,284,81],{"class":26},[20,286,288,291,293,296,299,302,305],{"class":22,"line":287},9,[20,289,290],{"class":71},"  transform",[20,292,75],{"class":26},[20,294,295],{"class":71},"rotate",[20,297,298],{"class":26},"(",[20,300,301],{"class":71},"45",[20,303,304],{"class":107},"deg",[20,306,307],{"class":26},");\n",[20,309,311],{"class":22,"line":310},10,[20,312,141],{"class":26},[148,314,315],{},[151,316],{"alt":153,"src":317},"https:\u002F\u002Fpub-5ec96507162a4f0a8e713a916117c9f4.r2.dev\u002Fblog\u002F2228eaee5b6a84b7b36617038c7a7663.png",[319,320,322],"h3",{"id":321},"喜欢或对你有帮助请点个赞吧","喜欢或对你有帮助，请点个赞吧 。",[319,324,326,327,334],{"id":325},"个人网站-点击访问","个人网站 -> ",[328,329,333],"a",{"href":330,"rel":331},"https:\u002F\u002Fhongweizhu.com",[332],"nofollow","点击访问"," 。",[336,337,338],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}",{"title":15,"searchDepth":68,"depth":68,"links":340},[341,342,343,344],{"id":145,"depth":68,"text":146},{"id":157,"depth":68,"text":158},{"id":171,"depth":68,"text":172},{"id":175,"depth":68,"text":176,"children":345},[346,347],{"id":321,"depth":84,"text":322},{"id":325,"depth":84,"text":348},"个人网站 -> 点击访问 。","前端",null,"2020-07-25",false,"md",{},true,"\u002Fblog\u002Ffrontend_web_css_triangle_example",{"title":5,"description":5},"blog\u002Ffrontend_web_css_triangle_example",[360],"web","2R_Z-nNMS62vsIyb3YZgGOiUQGSV5SfIGqqAgEtbWEI",1782052096180]