CSSで三角記号を描く

**前端7班の陸恩沢**は5班の授業を予習する過程で、愚先生が小さな宿題を配置したらCSSを通じて三角記号を書くことになり、その時いくつかのソースコードのdemoを見てよく分からなかった(以下:CSS関連コードを貼り付ける).

コードブロック

 *{
  margin: 0;
  padding: 0;
}
.caret-down {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.caret-up {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-bottom: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

私はインターネットで関連する技術ブログのスタンプを検索して、絵の原理を明らかにしました.三角形を描くときは、要素の幅と高さを必ず0に設定します.枠線のプロパティと枠線の色を設定して、異なる方向と色の三角形を描きます.