BFE.dev
フロントエンド面接質問集84. CSSで三角形をどう作る？AI解答例
この解答例はChatGPTによって生成されています，正しいかは自己判断で。 皆の投稿からも解答例が見つかるかもしれませんよ。

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;
}
  1. transformを使った方法
.triangle{
  width: 100px;
  height: 100px;
  background-color: red;
  transform: rotate(45deg); 
}
  1. 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;
}
  1. clip-pathを使った方法
.triangle{
  width: 100px;
  height: 100px;
  background-color: green;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
}
  1. SVGを使った方法
<svg width="100" height="100">
  <polygon points="0,0 100,0 50,50" style="fill:blue;" />
</svg>