CSSで三角形を作る

■ はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・CSSの基礎知識が増える
・CSSで三角形を扱う

↓ 便利なサービス
CSS三角形作成ツール

■ 例

親要素divと子要素spanがあってspanを三角形とする場合です

index.scss

div {
  position: relative;
  // その他省略
  span {
    position: absolute;
    top: 100%;
    left: 47%;
    border-style: solid;
    border-width: 15px 50px 0 50px;
    border-color: #3b4552 transparent transparent transparent;
  }
}

・ positionを使う
・ topとleftを%指定するか、transform: translate();で変更に適応化させる