グローバルナビのカスタマイズについて

両端を三角に切り抜くと言うのはできると思いますが、PCの時だけでいいんですよね？
たまに、他の端末でも普通のグローバルナビを表示させたいと言う方もおられますので念の為。
あとグローバルナビのアイテムに折り返しは発生してないですか？つまり1段に収まっているかどうかです。

ちなみにcssで三角を入れるのはアレですが、このカスタマイズについては初歩的なことではないと思いますよ。

返信ありがとうございます。pcの時だけで充分です。ナビは一段に収まっています。
簡単なcssではこのナビの変更は難しいのでしょうか。

すでにサンプルは作ってあるんですけどね（笑）

サンプル: グローバルナビの両端を三角にする | codepen

ナビのデザインを変えるのは、思ったより大変なのが実情です。例えばこのサンプルで、高さをもう少し取りたいとした場合に、高さ自体は簡単に大きくすることができますが、その中身の位置を縦中央に寄せるにはどうすればよいか？とか、メニューアイテムをマウスオーバーした時に色が変わるのをこの大きくした枠に合わせたいとか、ちょっとした変更するたびに微調整や大きな変更をしないといけないので、他の要素をいじるより面倒くさいパーツではあります。

サブメニューがなければそんなに大変なことではなかったりするんですけどね。それかもういっそのこと三角にする部分に画像を入れてしまうと言うのもひとつの方法です。素材を作るのが面倒くさいですけれども。SVGで背景に帯を入れてもよいのかも知れません。

今回のサンプルはcssだけでしていますが、そもそもの背景色などはulに対してスタイルされています。が、それだとその中身のliがfloatしていて、clearfix等の処理がされているので、beforeやafterの擬似要素がうまく使えない場合があります。特にafter部分で。

なので、メニュー自体が入っている、.menu-何かしらのテキスト-containerと言う親要素に色を付けなおしてここに擬似要素を入れることで実現しています。元のulの背景を消したり、borderも消しています。borderを実現するためには、もう一つ何かしらの要素が必要で、その何かしらの要素のbefore等の擬似要素と.menu-何かしらのテキスト-containerの要素をずらして配置することで線に見せることは可能です。
おそらくこの何かしらの要素はjQuery等で入れる必要があるでしょう。

cssで三角を作ってと言う方法は他にも可能です。例えば四角形を作り、transformで45度回転させ、親要素にoverflow:hiddenを入れれば三角ができます。が、ひし形の斜辺は単純に1とは限らないので、ここは微調整が必要です。

サンプル: transformと親要素のoverflowで三角を作る | jsFiddle

「ひし形の斜辺は単純に1とは限らない」これは例えば、高さが3em、横は任意の長方形があったとして、上記方法で擬似要素を45度回転させると言う手法をした時に、width:3em、height:3emの四角形を45度回転させると言うことは、その擬似要素の対角線が高さになってしまうため本来想定よりも大きくなってしまうのです。
√(3²+3²) = 4.242640687が対角線の長さ
4.242640687 / 3 = 1.414213562倍になり
3 / 1.414213562 = 2.121320344emが四角形のサイズ(width,height)とおおよそ想定できる感じです。
つまり、元の要素の高さの0.707106781倍あたりにして微調整

とまぁ面倒なことになりますが、このあたりはだいたいで良いです。最悪transformのscale等で四角形を変形させても良いですし。

高さを変えないのであれば、つまり1段で収まってくれているのであればcodepenのサンプルの方が良いでしょうし、高さを変えるのであればjsFiddleの方のサンプルの方が計算がさっくりかも知れません。

いずれにしても、何かしら変更するとそれに伴って他の部分も修正する必要があるかもしれません。

jsFiddleの方で、mix-blend-mode: color-dodge;というのがチラリと入ってますが、これは必要ありません。
ちょっといろいろしていた時に入れてた残骸です。

hidekichiさん感激いたしました。ありがとうございます！それも丁寧な解説つきで2つも回答していただけるなんて嬉しいです。
codepenを使用していきたいと思います。

ありがとうございました！