CSS3 帶有邊框的三角是網頁設計中常用的效果之一。通過CSS3中的border和transform屬性實現帶有邊框的三角非常簡單。 首先，在HTML文件中創建一個div元素：

<div class="triangle"></div>

接著，在CSS文件中定義這個div元素的樣式。首先，設置div的寬度和高度，然后設置border，以及邊框的顏色和樣式：

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #000000;
}

這樣，我們就得到了一個黑色的等腰三角形。然而，它還沒有邊框。為了給三角形添加邊框，我們需要在CSS中再添加一些代碼。

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #000000;
position: relative;
}
.triangle::before {
content: "";
position: absolute;
z-index: -1;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
border: 1px solid #000000;
border-left: none;
border-right: none;
transform: skew(-45deg);
}

這段代碼利用了偽元素::before來增加div的邊框。首先，我們需要讓div有一定的位置，所以添加了position: relative。接著，利用::before創建一個新的元素，并設置它的位置、尺寸和邊框。最后，應用transform: skew(-45deg)來將這個新元素旋轉45度。 最終，我們得到了一個帶有邊框的三角形。這種效果在很多情況下都很有用，例如在制作箭頭、氣泡等圖形時，都可以使用這種方法來實現帶有邊框的三角形。