【HTML / CSS】CSSで簡単な図形を描いてみる

HTMLとCSSだけで図形を描かなくてはいけない場合のために・・・
そんな機会ってあまりありませんけどね！？ないよね？たまーにあるけど・・・
どっちやねん＞＜

単純な四角形

<div class="square-100 back-color-black"></div>

.square-100 {
  width: 100px;
  height: 100px;
}
.back-color-black {
  background-color: black;
}

単純な円

<div class="circle-100 back-color-black"></div>

.circle-100 {
  width: 100px;
  height: 100px;
  background: black;
  border-radius: 50px;
}
.back-color-black {
  background-color: black;
}

三角

台形

<div class="daikei"></div>

.daikei {
  width: 120px;
  border-bottom: 50px solid black;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
}

星

頑張って作ろうと思いましたが、こちらのサイトを見た方がわかりやすそうだったので。。。
https://qiita.com/nekoneko-wanwan/items/8f8968dfeb459d81cdf1