画像を使わずにCSSで三角形を作る方法。

①、空のdiv要素にborderを設定。(太さは色は適宜)
div{
border: 10vw solid #333;
}

divはブロックレベル要素だから、色をつけると画面いっぱいに下記のように表示される。
sankaku01
②.divのwidth, heightを0にする
div{
border: 1vw solid #333;
   width: 0;
height: 0;

}

正方形になる。sankaku02

③、borderのtop, right, bottom, leftそれぞれに色を付けてみる。
div{
border: 1vw solid #333;
width: 0;
height: 0;
 border-top-color: red;
border-right-color: aqua;
border-bottom-color: blue;
border-left-color: yellowgreen;

}
sankaku03

④、三角形にしたい部分以外の色を消す。

div{
border: 10vw solid #333;
width: 0;
height: 0;
border-left-color: yellowgreen;
}
sankaku04
⑤、最後に borderの色を透明にする。
div{
border: 10vw solid transparent;
width: 0;
height: 0;
border-left-color: yellowgreen;
}

transparent(トランスペアレント)は透明という意味。

英語苦手です。
trans … 超えて・横切って・貫いて
parent … 親
という2個は親のレイヤーを貫く、つまり透過するという意味になるのか。

 

アレンジ

正三角形:三角形の形を変えてみた。

sankaku06

div{
border: 10vw solid transparent;
width: 0;
height: 0;
border-left: 15vw solid yellowgreen;
}

長方形を付け加えて、矢印にしてみる

もう一つdivを作り、長方形のcssを設定。

三角形と長方形のdivをdivで囲み、FlexBoxで横並びにする。

<style>
.arrow{
display: flex;
vertical-align: middle;
}
.chouhoukei{
width: 15vw;
height: 5vw;
background: yellowgreen;

}
.sankaku{
border: 5vw solid transparent;
width: 0;
height: 0;
border-left: 8vw solid yellowgreen;
}

</style>

<div class=”arrow”>
<div class=”chouhoukei”></div>
<div class=”sankaku”></div>
</div>

sankaku07

このままだと長方形が上寄せになっているので、縦方向の中央寄せにしたい。

テキスト文の中央寄せは、text-align;だが、縦方向の整列は難しい。

今回はmarginを使って中央寄せする。

上と下をmargin autoにして、右と左は0に設定。

.chouhoukei{
width: 15vw;
height: 5vw;
background: yellowgreen;
   margin: auto 0;
}

これで矢印が完成!

sankaku08

さらに、この矢印の中に文字列を入れてみる。詳細ページはこちらなどaタグで囲ってページ遷移を促すのに使えそうだ。

長方形の部分にpタグを追加し、文字列をいれてみる。

もちろん文字列の長さ・太さによっては長方形からはみ出る。

sankaku09

pタグのフォントサイズまたは長方形の長さを適宜合わせる。

次は長方形の中の文字列が縦方向の中央揃えになっていない(下揃えになっている)。横方向もついでに中央寄せにしておく。

margin: autoにしてみたら、上寄せなってしまった。

調べた結果、pタグの親のdivにFlexboxでセンター寄せをすればよいらしい。

やりたいことがやっとできました・・・!

sankaku10

.chouhoukei{
width: 15vw;
height: 5vw;
background: yellowgreen;
margin: auto 0;
display: flex;
align-items: center;
justify-content: center;

}

display:flexの使い方は覚えているが、align-itemsjustify-contentの使い方を覚えていない。復習です。

まず、justify-content(ジャスティファイコンテント)は子要素の水平方向の配置を指定する、つまり親要素に設定。
justify-contentの値には、center(よく使う)、flex-end(右揃え)、space-betweenとspace-around(均等割り付け)がある。初期値は左寄せ。

align-items(アラインアイテムズ)は、アイテムが並ぶ方向の主軸の位置を指定する。
うーん、色々組み合わさると難しい…

 

この文字列が2行になったらどうなるのでしょう、、、

その都度、長方形や三角で作られた矢印のサイズを変更するのは大変です。

また、スマートフォンやタブレットでの表示など、幅高さを固定にすると文字列がはみ出るなどしてしまうかもしれません。

VWはビューポートの幅に対する割合の単位です。WHはビューポートの高さに対する割合の単位。px指定ではなく、画面の幅に対する割合を設定しておけばよいと思います。

cssのコーディングが分からない時はよくググってその場しのぎで当てはめて解決していましたが、根本的解決になっていませんでした。ちゃんと理解しよう!

結局、text-alignは要らなかった。