三角形ですが、cssで作るのは大変なのに驚きました。たかが三角形ですが、最初は苦労します。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* 左側の辺を透明に */
border-right: 50px solid transparent; /* 右側の辺を透明に */
border-bottom: 100px solid blue; /* 底辺を青色に */
}
上記の方法は.triangleクラスを持つ要素内に青い三角形を作成しています。borderプロパティを使用して各辺の幅と色を設定し、border-bottomプロパティを使用して底辺を青色にしています。1から考えて、作るのは大変なので、先人の方が、三角形を簡単に作成できるツールを載せてあるサイト等がありますので、それらを活用するのがいいかと思います。