Edited at

【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 サンプルコード修正しました。