概要
画像で三角ってナウくない気がしたので、CSSで三角形を作ることにしました。
ぽんこつなので、ぱっと考えつかず例のごとくgoogle先生に教えてもらうことにして、あとは右から左へQiitaに投稿するのみ..
手順
ステップ1
http://apps.eky.hk/css-triangle-generator/ja
↑httpsではないのですが、よいジェネレータさんがいらっしゃったので拝借します。
まずはお好みの向きで三角形をジェネレート。
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 10px 100px;
border-color: transparent transparent #007bff transparent;
↑ジェネレータさんがこのように▲上向き二等辺三角形を生成してくれました。
この時点ではレスポンシブではありません。
ステップ2
ありがたく拝借したコードに手を加えてレスポンシブ全幅にします。
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ステップであっという間にレスポンシブ全幅上向き二等辺三角形▲ができあがりました♪
おまけ
アレンジ例:
<div class="sankaku"></div>
.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 サンプルコード修正しました。