網格中的按鈕，間隙中有箭頭

我有顯示在 CSS 網格上的按鈕。我想在空白處加上箭頭，就像流程圖一樣。如果無法使用 css 網格可以想到可以使用另一種技術實作的東西。這是 stackblitz，它將顯示我的實作，中間沒有箭頭。

uj5u.com熱心網友回復：

我將創建可應用于每個“步驟”的類，具體取決于箭頭需要指向的方向（上、下、左、右），然后使用::after偽選擇器在每個類上創建箭頭元素，并根據需要進行樣式設定。

見下文。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 20px;
}

.step {
  background-color: blue;
  color: white;
  padding: 10px;
  position: relative;
}

.arrow-right::after {
  color: black;
  content: '→';
  font-size: 20px;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.arrow-down::after {
  color: black;
  content: '↓';
  font-size: 16px;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
}

.arrow-up::after {
  color: black;
  content: '↑';
  font-size: 16px;
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
}

.arrow-left::after {
  color: black;
  content: '←';
  font-size: 20px;
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
}

<div class="grid">
  <div class="step arrow-right">Step X</div>
  <div class="step arrow-down">Step X</div>
  <div class="step">Step X</div>
  <div class="step">Step X</div>
  <div class="step arrow-down">Step X</div>
  <div class="step">Step X</div>
  <div class="step arrow-up">Step X</div>
  <div class="step arrow-left">Step X</div>
  <div class="step">Step X</div>
</div>

uj5u.com熱心網友回復：

另一種方法是使用 SVG

更新我忘記在計算路徑時添加 window.scrollX 和 window.scrollY（剛剛在代碼和 stactblitz 中更正）

這個想法全部放在一個包裝器div下

<div #wrapper class="wrapper">
  <svg [attr.width]="size.width" [attr.height]="size.height"
  xmlns="http://www.w3.org/2000/svg">
    <path *ngFor="let path of paths" [attr.d]="path" />
  </svg>
  <div #bt *ngFor="let item of procDesc; let i = index" class="step">
    ..your buttons..
  </div>
</div>

您使用 viewChild 和 ViewChildren 獲取元素并宣告一個“路徑”陣列和一個具有包裝器大小的物件

  @ViewChildren('bt') items:QueryList<ElementRef>
  @ViewChild('wrapper') wrapper:ElementRef

  paths:string[]=[]
  size={width:0,height:0}

然后，當您調整大小時（我在 stackblitz 中使用 fromEvent rxjs 運算

* {
  margin: 0;
  padding;
  0;
  box-sizing: border-box;
}

.container {
  --gap: 10vmin;
  /* set this to what you want the gap to be - absolute units */
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr 1fr 1fr;
  width: 100vw;
  /* set this to whatever you want */
  padding: var(--gap);
}

.container>* {
  border: solid 1px black;
  width: 100%;
  --ar: 3 / 1;
  /* set this to what you want the aspect ratio of a button to be */
  aspect-ratio: var(--ar);
  position: relative;
}

.container>*::after {
  content: '';
  width: var(--gap);
  --arrow: 20px;
  /* set this to the height of the arrowhead  */
  --ha: calc(var(--arrow) / 2);
  /* half the height of an arrowhead */
  --line: 2px;
  /* set this to the width (height) of the lines */
  --hl: calc(var(--line) / 2);
  /* half the height of a line */
  height: var(--arrow);
  background-color: black;
  clip-path: polygon(0 calc(var(--ha) - var(--hl)), calc(100% - var(--ha)) calc(var(--ha) - var(--hl)), calc(100% - var(--ha)) 0, 100% 50%, calc(100% - var(--ha)) 100%, calc(100% - var(--ha)) calc(var(--ha)   var(--hl)), 0 calc(var(--ha)   var(--hl)));
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(-1 * var(--gap));
}

.container>*:nth-child(3n)::after {
  width: calc(200%   (2 * var(--gap))   var(--line));
  height: var(--gap);
  transform: translateY(0);
  top: 100%;
  right: calc(50% - (var(--hl)));
  clip-path: polygon( 100% 0, 100% calc(50%   var(--hl)), calc(var(--ha)   var(--hl)) calc(50%   var(--hl)), calc(var(--ha)   var(--hl)) calc(100% - var(--ha)), var(--arrow) calc(100% - var(--ha)), var(--ha) 100%, 0 calc(100% - var(--ha)), calc(var(--ha) - var(--hl)) calc(100% - var(--ha)), calc(var(--ha) - var(--hl)) calc(50% - var(--hl)), calc(100% - var(--line)) calc(50% - var(--hl)), calc(100% - var(--line)) 0);
}

.container>*:last-child::after {
  display: none;
}

<div class="container">
  <button></button><button></button><button></button><button></button><button></button><button></button><button></button><button></button><button></button>
</div>

標籤：css 有角度的 字体真棒

上一篇：使用window.print()時如何隱藏輸入標簽

下一篇：如何將尺寸從未知寬度更改為100%？