Html 由于错误，三角形渲染为矩形CSS

我是CSS和HTML的初学者，目前我正在尝试用CSS样式创建一个三角形。我在网上查了一下怎么做，大家的共识似乎都是关于边界的。我试着用我看过的例子，但我只得到一个矩形

html，
身体{
背景色：#DBDCDE；
/*溢出：隐藏*/
/*空白：nowrap*/
位置：相对位置；
}
.形状{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
}
.三角形{
宽度：0；
身高：0；
左边框：100px实心透明；
右边框：100px实心透明；
边框底部：100px实心白杏仁；
}
布兰切德先生{
背景颜色：白杏仁；
左：-400px；
}

html，
身体{
背景色：#DBDCDE；
/*溢出：隐藏*/
/*空白：nowrap*/
位置：相对位置；
}
.形状{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
}
.三角形{
宽度：0；
身高：0；
左边框：100px实心透明；
右边框：100px实心透明；
边框底部：100px实心白杏仁；
}
布兰切德先生{
左：-300px；
顶部：100px；
}

html，
身体{
背景色：#DBDCDE；
/*溢出：隐藏*/
/*空白：nowrap*/
位置：相对位置；
}
.形状{
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
}
.三角形{
宽度：0；
身高：0；
左边框：100px实心透明；
右边框：100px实心透明；
边框底部：100px实心白杏仁；
}
布兰切德先生{
左：-300px；
顶部：100px；
}