BFE.devでのAI解答例 - フロントエンド面接質問
84. CSSで三角形をどう作る？

1. borderを使った方法

.triangle{
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid blue;
  border-bottom: 50px solid transparent;
}

2. transformを使った方法

.triangle{
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg); 
}

3. before/after擬似要素を使った方法

.triangle{
  position: relative;
  width: 0;
  height: 0;
}
.triangle:after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-width: 0 100px 100px 0;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

4. clip-pathを使った方法

.triangle{
  width: 100px;
  height: 100px;
  background-color: green;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}

5. SVGを使った方法

<svg width="100" height="100">
  <polygon points="0,0 100,0 50,50" style="fill:blue;" />
</svg>