トップ･ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．

"T3T"掲示板(Twilight(トワイライト) Triath(トライアス)(3) Trim(トリム))
★この掲示板は書き込みを停止いたしました 。
記事の書き込みはリンク･ページの表示 http://ashtarte.hotcom-web.com/utf8/smt.cgi?r+rpr/ を ご利用 下さい。

  　 
 　 

ページの表示順：｛ 新しい順／ 古い順｝．
初期･ページの表示･位置：｛ 先頭ページ／ 末尾ページ｝．
１ページ内のスレッド表示数：







<Number>: [000001EC]　 <Date>: 2021/09/25 15:02:51
<Title>: CSSデモ／Nav_Item_Arrow
<Name>: amanojaku@管理人

ウインドウ幅を超えると自動的に改行されます(ウインドウ幅を小さくしてみるとウインドウ幅を超えると自動的に改行されるのが確認できます)。
行間を変更したい場合はは「gap: 0.3rem 0;」の「0.3rem」を変更して下さい。
Nav_Item_Boxのバックグラウンド･カラーを変更したいなら「background-color: #f77;」を変更して下さい。
「background-color: #fff;」はbodyのバックグラウンド･カラーと一致させて下さい。
必ず「z-index」は１づつマイナスしてください。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
↑metaタグでcharsetをUTF-8に設定しています。
必ずcharsetに設定されているキャラクターセット(エンコード)でセーブして下さい。
キャラクターセット(エンコード)が違うと全角文字が文字化けします。
-->
<title></title>
<style>
.Nav_Flex_Container{
  display: flex;
  gap: 0.3rem 0;
  flex-wrap: wrap;
  padding: 0 1rem 0 0;
}
.Nav_Item_Box {
  position:relative;
  display: inline-block;
  height: 2rem;
  border-style: solid none solid none;
  border-width: thin;
  border-color: #000;
  background-color: #f77;
}
.Nav_Item_Arrow {
  position: absolute;
  display: inline-block;
  width: 1.41421356rem;
  height: 1.41421356rem;
  top: 50%;
  transform: translate(-0.70710678rem, -50%) rotate(-45deg);
  border-style: none solid solid none;
  border-width: thin;
  border-color: #000;
}
.Nav_Item_Arrow_Begin {
  left: 0;
  background-color: #fff;
}
.Nav_Item_Arrow_Terminal {
  left: 100%;
  background-color: #f77;
}
.Nav_Item_Box > .Text_Middle {
  padding: 0 1rem 0 1.7rem;
  height: 2rem;
}
.Text_Middle {
  display: table-cell;
  vertical-align: middle;
}
</style>
</head>
<body>

<div class="Nav_Flex_Container">

<div class="Nav_Item_Box" style="z-index: -1; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -2; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -3; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -4; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -5; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -6; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -7; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -8; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -9; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -10; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -11; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

<div class="Nav_Item_Box" style="z-index: -12; " >
<div class="Nav_Item_Arrow Nav_Item_Arrow_Begin"></div>
<div class="Text_Middle">qwerty</div>
<div class="Nav_Item_Arrow Nav_Item_Arrow_Terminal"></div>
</div>

</div>

</body>
<script>
</script>
</html>

<Number>: [000001EE]　 <Date>: 2021/09/28 00:26:22
<Title>: CSSデモ／Nav_Item_Arrow(2)
<Name>: amanojaku@管理人

ウインドウ幅を超えると自動的に改行されます(ウインドウ幅を小さくしてみるとウインドウ幅を超えると自動的に改行されるのが確認できます)。
Nav_Item_Boxのバックグラウンド･カラーを変更したいなら「background-color: #f77、fill: #f77」を変更して下さい。
「z-index」は、必ず１づつマイナスしてください。


<!DOCTYPE html>
<html>
  <head>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
    <meta charset='UTF-8'>
    <TITLE></TITLE>
    <style>
      
.Text_CenterMiddle {
  position: relative;
  display: inline-flex;
  vertical-align: center;
}

.Nav_Container {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap; 
  gap: calc(1rem / 16 * 4) calc(1rem / 16 * 6);
  padding: 0 calc(1rem / 16 * 20) 0 0;
}
.Nav_Item_Box {
  display: inline-block;
  position: relative;
}
 
.ArrowBody {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing : border-box ;
  height: calc(1rem / 16 * 33);
  background: #f77;
  border-style: solid none solid solid ;
  border-width: calc(1rem / 16 * 1);
  border-color: #000;
  padding: 0 calc(1rem / 16 * 16) 0 calc(1rem / 16 * 16);
}

.SVGUse_Arrow {
  fill: #f77;
  stroke: #000;
}
.SVG_ArrowBody {
  height: calc(1rem / 16 * 33);
  position: relative;
  padding: 0 calc(1rem / 16 * 16) 0 calc(1rem / 16 * 16);
}
.SVG_ArrowMold {
  width: calc(1rem / 16 * 17);
  height: calc(1rem / 16 * 33);
}
.SVG_ArrowCast {
  width: calc(1rem / 16 * 17);
  height: calc(1rem / 16 * 33);
  position: absolute;
}

    </style>
    </head>
       
      <svg  display="none" >
      <defs>
        <symbol id="idSVGSymbol_ArrowCast"  viewBox="0 -0.5, 17 33">
          <g>
          <path stroke-width="0" 
          d="M 0 0, 16 16, 0 32 Z"/>
          <path stroke-width="1"  stroke-linecap="round" stroke-linejoin="round" 
          d="M 0 0, 16 16, 0 32"/>
          </g>
        </symbol>
      </defs>
      </svg>    
      
    <body>
    
     <div class="Nav_Container">

     <div class="Nav_Item_Box" style="z-index: -1; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -2; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -3; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -4; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -5; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -6; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -7; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -8; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -9; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
    </div> 
     <br>   
       
    </body>
</html>

<Number>: [000001F1]　 <Date>: 2021/09/30 03:24:14
<Title>: CSSデモ／Nav_Item_Arrow(3)
<Name>: amanojaku@管理人

ウインドウ幅を超えると自動的に改行されます(ウインドウ幅を小さくしてみるとウインドウ幅を超えると自動的に改行されるのが確認できます)。
Nav_Item_Boxのバックグラウンド･カラーを変更したいなら「--Arrow-BackColor: #f77;」を変更して下さい。
ArrowBodyのフォント･サイズを変更したいなら「--Arrow-FontSize: 1rem;」を変更して下さい。
「z-index」は、必ず１づつマイナスしてください。


<!DOCTYPE html>
<html>
  <head>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
    <meta charset='UTF-8'>
    <TITLE></TITLE>
    <style>

:root {
  --Arrow-FontSize: 1rem;
  --Arrow-BackColor: #f77;
}

.Text_CenterMiddle {
  position: relative;
  display: inline-flex;
  vertical-align: center;
}

.Nav_Container {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap; 
  gap: calc(var(--Arrow-FontSize) / 16 * 4) calc(var(--Arrow-FontSize) / 16 * 6);
  padding: 0 calc(var(--Arrow-FontSize) / 16 * 20) 0 0;
}
.Nav_Item_Box {
  display: inline-block;
  position: relative;
}
 
.ArrowBody {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--Arrow-FontSize);
  box-sizing : border-box ;
  height: calc(var(--Arrow-FontSize) / 16 * 33);
  background: var(--Arrow-BackColor);
  border-style: solid none solid solid ;
  border-width: calc(var(--Arrow-FontSize) / 16 * 1);
  border-color: #000;
  padding: 0 calc(var(--Arrow-FontSize) / 16 * 16) 0 calc(var(--Arrow-FontSize) / 16 * 16);
}

.SVGUse_Arrow {
  fill: var(--Arrow-BackColor);
  stroke: #000;
}
.SVG_ArrowBody {
  height: calc(var(--Arrow-FontSize) / 16 * 33);
  position: relative;
  padding: 0 calc(var(--Arrow-FontSize) / 16 * 16) 0 calc(var(--Arrow-FontSize) / 16 * 16);
}
.SVG_ArrowMold {
  width: calc(var(--Arrow-FontSize) / 16 * 17);
  height: calc(var(--Arrow-FontSize) / 16 * 33);
}
.SVG_ArrowCast {
  width: calc(var(--Arrow-FontSize) / 16 * 17);
  height: calc(var(--Arrow-FontSize) / 16 * 33);
  position: absolute;
}

    </style>
    </head>
       
      <svg  display="none" >
      <defs>
        <symbol id="idSVGSymbol_ArrowCast"  viewBox="0 -0.5, 17 33">
          <g>
          <path stroke-width="0" 
          d="M 0 0, 16 16, 0 32 Z"/>
          <path stroke-width="1"  stroke-linecap="round" stroke-linejoin="round" 
          d="M 0 0, 16 16, 0 32"/>
          </g>
        </symbol>
      </defs>
      </svg>    
      
    <body>
    
     <div class="Nav_Container">

     <div class="Nav_Item_Box" style="z-index: -1; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -2; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -3; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -4; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -5; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -6; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -7; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -8; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -9; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
    </div> 
     <br>   
       
    </body>
</html>

<Number>: [00000205]　 <Date>: 2021/10/13 22:40:25
<Title>: CSSデモ／Nav_Item_Arrow(5)、インライン SVG
<Name>: amanojaku@管理人

ウインドウ幅を超えると自動的に改行されます(ウインドウ幅を小さくしてみるとウインドウ幅を超えると自動的に改行されるのが確認できます)。
Nav_Item_Boxのバックグラウンド･カラーを変更したいなら「--Arrow-BackColor: #f77;」を変更して下さい。
ArrowBodyのフォント･サイズを変更したいなら「--Arrow-FontSize: 1rem;」を変更して下さい。
「z-index」は、必ず１づつマイナスしてください。

実際のページ。
http://xd305417.html.xdomain.jp/demo/NavArrow005.htm


<!DOCTYPE html>
<html>
  <head>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
    <meta charset='UTF-8'>
    <TITLE></TITLE>
    <style>

:root {
  --Arrow-Standard: 1rem;
  --Arrow-FontSize: 1rem;
  --Arrow-BackColor: #f77;
  --Arrow-Border-Width: calc(var(--Arrow-FontSize) / 16 * 1);
  --Arrow-Stroke-Width: 1;
  --Arrow-Row-Gap: calc(var(--Arrow-Standard) / 16 * 4);
  --Arrow-Column-Gap: calc(var(--Arrow-Standard) / 16 * 6);
}

.Text_CenterMiddle {
  position: relative;
  display: inline-flex;
  vertical-align: center;
}

.Nav_Container {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap; 
  gap: var(--Arrow-Row-Gap) var(--Arrow-Column-Gap);
  padding: 0 calc(var(--Arrow-FontSize) / 16 * 20) 0 0;
}
.Nav_Item_Box {
  display: inline-block;
  position: relative;
}
 
.ArrowBody {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--Arrow-FontSize);
  box-sizing : border-box ;
  height: calc(var(--Arrow-FontSize) / 16 * 33);
  background: var(--Arrow-BackColor);
  border-style: solid none solid solid ;
  border-width: var(--Arrow-Border-Width);
  border-color: #000;
  padding: 0 calc(var(--Arrow-FontSize) / 16 * 16) 0 calc(var(--Arrow-FontSize) / 16 * 16);
}

.SVGUse_Arrow {
  fill: var(--Arrow-BackColor);
  stroke: #000;
  stroke-width: var(--Arrow-Stroke-Width);
}
.SVG_ArrowBody {
  height: calc(var(--Arrow-FontSize) / 16 * 33);
  position: relative;
  padding: 0 calc(var(--Arrow-FontSize) / 16 * 16) 0 calc(var(--Arrow-FontSize) / 16 * 16);
}
.SVG_ArrowCast {
  width: calc(var(--Arrow-FontSize) / 16 * 17);
  height: calc(var(--Arrow-FontSize) / 16 * 33);
  position: absolute;
}
.SVG_ArrowMold {
  width: calc(var(--Arrow-FontSize) / 16 * 17);
  height: calc(var(--Arrow-FontSize) / 16 * 33);
}

    </style>
    </head>
       
      <svg  display="none" >
      <defs>
        <symbol id="idSVGSymbol_ArrowCast"  viewBox="0 -0.5, 17 33">
          <g>
          <path stroke-width="0" 
          d="M 0 0, 16 16, 0 32 Z"/>
          <path stroke-linecap="round" stroke-linejoin="round" 
          d="M -1 0, 0 0, 16 16, 0 32, -1 32,"/>
          </g>
        </symbol>
      </defs>
      </svg>    
      
    <body>
    
     <div class="Nav_Container">

     <div class="Nav_Item_Box" style="z-index: -1; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -2; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -3; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -4; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -5; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -6; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -7; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -8; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -9; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
    </div> 
     <br>   
       
    </body>
</html>

<Number>: [0000020D]　 <Date>: 2021/10/19 14:54:46
<Title>: CSSデモ／Nav_Item_Arrow(6)、インライン SVG
<Name>: amanojaku@管理人

ウインドウ幅を超えると自動的に改行されます(ウインドウ幅を小さくしてみるとウインドウ幅を超えると自動的に改行されるのが確認できます)。
Nav_Item_Boxのバックグラウンド･カラーを変更したいなら「--Arrow-BackColor: #f77;」を変更して下さい。
ArrowBodyのフォント･サイズを変更したい場合は「--Arrow-FontScale: 1;」を変更して下さい。
「z-index」は、必ず１づつマイナスしてください。


<!DOCTYPE html>
<html>
  <head>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
    <meta charset='UTF-8'>
    <TITLE></TITLE>
    <style>

:root {
  --Arrow-Standard: 1rem;
  --Arrow-FontScale: 1;
  --Arrow-BackColor: #f77;
  --Arrow-Border-Width: calc(var(--Arrow-FontScale) * 1rem / 16 * 1);
  --Arrow-Stroke-Width: 1;   
  --Arrow-Row-Gap: calc(var(--Arrow-Standard) / 16 * 4);
  --Arrow-Column-Gap: calc(var(--Arrow-Standard) / 16 * 6);
}

.Text_CenterMiddle {
  position: relative;
  display: inline-flex;
  vertical-align: center;
}

.Nav_Container {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap; 
  gap: var(--Arrow-Row-Gap) var(--Arrow-Column-Gap);
  padding: 0 calc(var(--Arrow-FontScale) * 1rem / 16 * 20) 0 0;
}
.Nav_Item_Box {
  display: inline-block;
  position: relative;
}
 
.ArrowBody {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--Arrow-FontScale) * 1rem);
  box-sizing : border-box ;
  height: calc(var(--Arrow-FontScale) * 1rem / 16 * 32);
  background: var(--Arrow-BackColor);
  border-style: solid none solid solid ;
  border-width: var(--Arrow-Border-Width);
  border-color: #000;
  padding: 0 calc(var(--Arrow-FontScale) * 1rem / 16 * 16) 0 calc(var(--Arrow-FontScale) * 1rem / 16 * 16);
}

.SVGUse_Arrow {
  fill: var(--Arrow-BackColor);
  stroke: #000;
  stroke-width: var(--Arrow-Stroke-Width);
}
.SVG_ArrowCast {
  width: calc(var(--Arrow-FontScale) * 1rem / 16 * 16);
  height: calc(var(--Arrow-FontScale) * 1rem / 16 * 32);
  position: absolute;
}
.SVG_ArrowMold {
  width: calc(var(--Arrow-FontScale) * 1rem / 16 * 16);
  height: calc(var(--Arrow-FontScale) * 1rem / 16 * 32);
}

    </style>
    </head>
       
      <svg  display="none" >
      <defs>
        <symbol id="idSVGSymbol_ArrowCast"  viewBox="0 -0.5, 16 32">
          <g>
          <path stroke-width="0" 
          d="M 0 0, 15.5 15.5, 0 31 Z"/>
          <path stroke-linecap="round" stroke-linejoin="round" 
          d="M 0 0, 15.5 15.5, 0 31"/>
          </g>
        </symbol>
      </defs>
      </svg>    
      
    <body>
    
     <div class="Nav_Container">

     <div class="Nav_Item_Box" style="z-index: -1; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -2; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -3; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -4; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -5; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -6; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -7; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -8; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
     <div class="Nav_Item_Box" style="z-index: -9; " > 
       <div class="ArrowBody Text_CenterMiddle">
         QWERTY
       </div> 
       <svg class="SVG_ArrowCast" >
         <use class="SVGUse_Arrow"  xlink:href="#idSVGSymbol_ArrowCast"></use>
       </svg>
     </div> 
     
    </div> 
     <br>   
       
    </body>
</html>

Block( Address 0000020F　Identity 000001EC )






ページの表示順：｛ 新しい順／ 古い順｝．
初期･ページの表示･位置：｛ 先頭ページ／ 末尾ページ｝．
１ページ内のスレッド表示数：

 　 
 　 

管理者用 Password：

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.