iiIDEA(ｲｲｱｲﾃﾞｱ)

ウェブサイトの見出しや背景などに、図形を使うことがあるかと思います。
今回はその中でも、CSSのborderプロパティを使用した三角形の作り方について記していこうと思います。

三角形の作り方

まず、例として下のような三角形の作り方です。

CSS

.triangle {
border-right: 50px solid transparent;
border-bottom: 86.6025px solid #95389E;
border-left: 50px solid transparent;
}

色々な向きの三角形を作るときは、指定するborderプロパティは以下のようになります。

CSS

.triangle {
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 86.6025px solid #95389E;
}

CSS

.triangle {
border-top: 86.6025px solid #95389E;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}

CSS

.triangle {
border-top: 50px solid transparent;
border-right: 86.6025px solid #95389E;
border-bottom: 50px solid transparent;
}