上一篇文章我們說了如何利用element做一個(gè)折疊面板，細(xì)心的朋友有沒有發(fā)現(xiàn)，下面的樣式中右上角有一個(gè)三角形，其實(shí)css的三角形很好畫，有的公司甚至還會(huì)把畫一個(gè)三角形當(dāng)做面試題，屬實(shí)是一個(gè)冷門又重要的知識(shí)，這里來記錄一下。
最簡(jiǎn)單的其實(shí)就是用邊框border來做一個(gè)三角形，給定一個(gè)寬度和高度都為 0 的元素，其 border 的任何值都會(huì)直接相交，我們可以利用這個(gè)交點(diǎn)來創(chuàng)建三角形。也就是說，border屬性是三角形組成的。只要我們?cè)O(shè)置其他三個(gè)邊的顏色為透明，就能得到一個(gè)三角形。
這樣我們就得到了一個(gè)三角形，至于為什么要用transform：rotate(45deg)來旋轉(zhuǎn)一下，這里是因?yàn)橛玫氖堑走叄O(shè)計(jì)圖需要一個(gè)朝向右上角的三角形。這樣通過旋轉(zhuǎn)我們得到了想要的三角形，在通過定位把三角形移動(dòng)到右上角，這里有個(gè)小技巧，我們可以設(shè)置整個(gè)大div為overflow：hidden，然后定位的時(shí)候可以稍微超出一點(diǎn)，這樣尖銳的三角被隱藏，我們就得到了一個(gè)頭部有弧度的三角形。
