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

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

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

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

うーん、『%』を使う!
ちがいまーす、『vw、vh』を使いまーす

レスポンシブな三角形

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

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 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版)、見出しに使えます

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

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

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版)、こんな感じにも使えます

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

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

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;
}

メモ

三角をつくるのにとても便利なサイトさんはこちらです。
書き方を覚えるまではとても活用させていただきました。

さいごに

三角パンが食べたくなってきましたー
私はダブルソフトが好きですー

関連記事

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

10

/

15

2024

Googleさんの
おすすめ

10

/

15

2024

デザインの記事

餃子そして焼味 巣王
ルックバック
【jQuery】スライダープラグイン「slick」実装サンプル集