なんにもない日の頭の中はこんなもんだったりする

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

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

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

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

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

レスポンシブな三角形

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

メモ

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

CSS三角形作成ツール

さいごに

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

関連記事

【CSS】三角アイコンと矢印アイコンをつくる

Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

ネ・ネット | HUMOR ユーモア
itgirlie
  • 2019.11.11New
  • itgirlie
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
11月13日
11月12日