CSS自適應高度三角形，是Web開發中經常使用的一種設計效果。它能夠使我們的網頁元素更富有層次感、有趣味性，也更加優美。

在CSS中，我們可以使用偽元素和transform屬性來實現自適應高度的三角形。

首先，我們需要定義一個元素，它會用作三角形的背景，通常是一個矩形的div元素。如下所示：

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

接下來，我們需要為這個元素定義樣式，設置其大小、位置和顏色等。特別地，我們需要使用transform屬性和偽元素:before和:after來定義三角形的形狀。

.triangle {
position: relative;
width: 100px;
height: 0;
margin-top: 50px;
border-top: 50px solid orange;
transform-origin: top;
transform: rotate(45deg);
}
.triangle:before, .triangle:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background-color: orange;
bottom: -50px;
}
.triangle:before {
left: -50px;
transform: skew(45deg);
}
.triangle:after {
right: -50px;
transform: skew(-45deg);
}

上述代碼定義了一個帶有orange顏色的三角形，該三角形的寬度和高度會根據父元素的大小自適應。我們使用了transform屬性的rotate和skew方法來旋轉和偏斜偽元素，從而實現三角形的形狀。通過margin-top將三角形垂直居中，并把矩形部分的高度設為0，使得三角形高度可以自適應。

總之，CSS自適應高度三角形是一種非常有趣、實用的設計效果，通過靈活運用transform屬性和偽元素，我們可以輕松地實現這種效果，讓我們的Web設計更加有活力。