CSS制作三角形遠離可以通過使用偽元素來實現。下面是一個例子：

.triangle {
position: relative;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #f00;
}
.triangle:before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #fff;
}

在這個例子中，我們創建了一個類名為triangle的元素，并為其設置了基本樣式，如：寬度和高度為0，以及邊框為實線。接下來，我們使用:before偽元素來創建一個覆蓋在三角形上的白色三角形，同時設置top和left屬性將其定位到主三角形的頂部和左側。

最后，我們還可以使用transform屬性來將三角形遠離，如：

.triangle {
position: relative;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #f00;
transform: translateY(50px);
}

在這個例子中，我們為三角形添加了transform屬性，并將其向下移動了50像素。