【CSS】レスポンシブ対応の三角形を作る

2019.10.31
CSS

CSSで三角形を作ることは意外と簡単だったりします。
では、レスポンシブな三角形ってどうでしょう？

あ、なるほど。と思ったので記事にしてみました。

うーん、『％』を使う！

ちがいまーす、『vw、vh』を使いまーす

レスポンシブな三角形
レスポンシブじゃない三角形（二等辺三角形）
レスポンシブじゃない三角形（正三角形）
レスポンシブな三角形（疑似要素:before版）、見出しに使えます
レスポンシブな三角形（疑似要素:after版）、こんな感じにも使えます
メモ
さいごに

レスポンシブな三角形

See the Pen
【CSS】レスポンシブ対応の三角形を作る by 125naroom (@125naroom)
on CodePen.

レスポンシブな三角形には、単位に『vw』と『vh』を使います。
『％』は『border-width』には使えないので要注意です。

HTMLとCSSはこちら

HTML

<div class="triangle"></div>

CSS

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50vw 100vh 50vw;
  border-color: transparent transparent #000 transparent;
}

レスポンシブじゃない三角形（二等辺三角形）

See the Pen
【CSS】二等辺三角形を作る by 125naroom (@125naroom)
on CodePen.

HTMLとCSSはこちら

HTML

<div class="triangle"></div>

二等辺三角形を作るのはとても簡単です。

CSS

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 250px 100px;
  border-color: transparent transparent #000 transparent;
}

レスポンシブじゃない三角形（正三角形）

See the Pen
【CSS】正三角形を作る by 125naroom (@125naroom)
on CodePen.

正三角形を作るのはなかなか難しいので便利ツールを使うのが早いですね。

HTMLとCSSはこちら

HTML

<div class="triangle"></div>

CSS

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 125px 216.5px 125px;
  border-color: transparent transparent #000 transparent;
}

レスポンシブな三角形（疑似要素:before版）、見出しに使えます

See the Pen
【CSS】レスポンシブな三角形（疑似要素:before版）、見出しに使えます by 125naroom (@125naroom)
on CodePen.

疑似要素「:before」を使って画面幅いっぱいの上矢印を作ってみました。

HTMLとCSSはこちら

HTML

<div class="san_box">
  <div class="san_in">
    <p class="san_t_a">テキスト！</p>
    <p class="san_t_b">テキストテキストテキスト<br>テキストテキスト</p>
  </div>
</div>

CSS

.san_box {
  background: #e60012;
  position: relative;
  margin: 60px 0 30px;
}
.san_box:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50vw 60px 50vw;
  border-color: transparent transparent #e60012 transparent;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
}
.san_box .san_in {
  text-align: center;
  padding: 0 0 30px;
}
.san_box .san_in .san_t_a {
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  margin: 0 0 10px;
}
.san_box .san_in .san_t_b {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

レスポンシブな三角形（疑似要素:after版）、こんな感じにも使えます

See the Pen
【CSS】レスポンシブな三角形（疑似要素:after版）、こんな感じにも使えます by 125naroom (@125naroom)
on CodePen.

疑似要素「:after」を使って画面幅いっぱいの下矢印を作ってみました。

HTMLとCSSはこちら

HTML

<div class="san_box">
  <div class="san_in">
    <p class="san_t_a">テキスト！</p>
    <p class="san_t_b">テキストテキストテキスト<br>テキストテキスト</p>
  </div>
</div>

CSS

.san_box {
  background: #e60012;
  position: relative;
  margin: 0 0 60px;
}
.san_box:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 60px 50vw 0 50vw;
  border-color: #e60012 transparent transparent transparent;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
.san_box .san_in {
  text-align: center;
  padding: 30px 0 0;
}
.san_box .san_in .san_t_a {
  color: #ffffff;
  font-size: 30px;
  font-weight: bold;
  margin: 0 0 10px;
}
.san_box .san_in .san_t_b {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}