【CSS】レスポンシブな全幅の二等辺三角形の作り方▲▼▶◀ #CSS

概要

画像で三角ってナウくない気がしたので、CSSで三角形を作ることにしました。
ぽんこつなので、ぱっと考えつかず例のごとくgoogle先生に教えてもらうことにして、あとは右から左へQiitaに投稿するのみ..

手順

ステップ1

http://apps.eky.hk/css-triangle-generator/ja
↑httpsではないのですが、よいジェネレータさんがいらっしゃったので拝借します。

まずはお好みの向きで三角形をジェネレート。

style.css

width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 10px 100px;
border-color: transparent transparent #007bff transparent;

↑ジェネレータさんがこのように▲上向き二等辺三角形を生成してくれました。
この時点ではレスポンシブではありません。

ステップ2

ありがたく拝借したコードに手を加えてレスポンシブ全幅にします。

style.css

width: 0;
height: 0;
border-style: solid;
border-width: 0 50vw 10px 50vw;
border-color: transparent transparent #007bff transparent;

上記のように変更。変わった箇所はborder-width: 0 50vw 10px 50vw;だけ。お色も任意で変えてくださいね。

vhとは
ビューポートハイトの略です。ビューポートの幅の1/100が1vwになります。
50%だと思いがけない動きになる恐れがあるので、50vwを使用します。

詳しくはこちらをご参照ください。
https://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html

簡単2ステップであっという間にレスポンシブ全幅上向き二等辺三角形▲ができあがりました♪

おまけ

アレンジ例:

test.html

<div class="sankaku"></div>

foo.scss

.sankaku{
    padding-top: 110px;
    overflow: hidden; //スクロールバー対策
    position: relative;

    &:before {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 110px 0 0 50vw;
        border-color: transparent transparent transparent blue;
        position: absolute;
        top: 0;
        z-index: 1;
    }
    &:after{
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 110px 50vw;
        border-color: transparent transparent blue transparent;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }
}

:beforeと:afterを組み合わせて、右向き三角形▶左向き三角形◀の合わせ技も♪
工夫次第でいろんな図形ができそうです。

注意点

vwを使って全幅にすると、スクロールバー分のwidthが横幅から漏れてしまいます。親要素にoverflow:hiddenをかけて三角形を含めたheightを指定するか、paddingで三角形分プラスしてあげるといいかもしれません。

そのときは
left: 50%;
transform: transrateX(-50%);
を三角形に足してあげてくださいね！

あとがき

画像にしてしまえば簡単中の簡単なのだけど、やっぱりこういうのはCSSでやったほうが軽いしキレイですよね。
そして、なるたけCSSで組み上げたい年頃。SVGでポリゴンな絵を作るのも楽しそうです。

追記
2019.01.23 注意点、修正しました。
2019.01.23 サンプルコード修正しました。