方法：1、利用“border:長度值 solid transparent;border-top:高度值 solid 顏色值”語句，可以設(shè)置空元素為三角形樣式；2、將小的三角形元素放置在不同顏色的大三角形元素內(nèi)，就可以實現(xiàn)三角形帶邊框的效果。
本教程操作環(huán)境：windows10系統(tǒng)、css3&&html5版、dell g3電腦。
css3怎樣實現(xiàn)三角形帶邊框效果
在css中，想要實現(xiàn)三角形帶邊框效果，需要利用border屬性。
首先我們需要一個寬和高都是0的div元素，然后利用border屬性設(shè)置div的邊框樣式，將邊框的粗細值設(shè)置為下三角長度的一半，并將邊框顏色設(shè)置為透明色。
最后再通過border-top屬性將div元素的上邊框顯示出來即可。
將小的三角形元素放置在不同顏色的大三角形元素內(nèi)，就可以實現(xiàn)三角形帶邊框的效果。
示例如下：
<!doctype html><html lang=\”en\”><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>document</title> <style> #demo { width: 0; height: 0; position: relative; border-top: solid 50px transparent; border-right: solid 50px black; /* 黑色大三角形 */ border-bottom: solid 50px transparent; } #demo:after { content: \”\”; width: 0; height: 0; position: absolute; left: 3px; top: -45px; border-top: solid 45px transparent; border-right: solid 45px white; /* 白色小三角形 */ border-bottom: solid 45px transparent; }</style></head><body><div id=\”demo\”></div></body></html>
輸出結(jié)果：
（學習視頻分享：css視頻教程）