CSS 直角文字怎麼做？超日系風格的設計

前陣子看到某個日本網站做出這樣的直角文字，並搭配動畫，整個超日系超愛，結果發現他們整個文字是用圖片做的（ 跟 113 國慶網站一樣ＸＤ）

身為喜歡前端特效的我，一定要研究一下純 CSS 是怎麼做到的，用成文字也能讓用戶可以直接複製。

來看看怎麼做的吧～

HTML 結構

HTML 不難，基本上就是一個 container，裡面包含一張圖片跟兩段文字，文字的部分用 horizontal、corner、vertical 來為等等的排版做準備。

<div class="container">
  <img class="container__img" src="./assets/img.jpg" alt="img" />
  <p class="container__text top-right">
    <span class="horizontal">努力する人は希望を語り</span>
    <span class="corner">、</span>
    <span class="vertical">怠ける人は不満を語る</span>
  </p>
  <div class="container__text bottom-left">
    <span class="vertical">人間の想像力は実現で</span>
    <span class="corner">き</span>
    <span class="horizontal">るものしか想像できない</span>
  </div>
</div>

CSS 排版

接著來看 CSS~

container & img 排版

這裡我們用 css variable 來統一管理 border 和 font-size，並讓圖片撐滿整個 container

.container {
  --border: 1px solid;
  --font-size: min(2.5vw, 56px);

  position: relative;
  width: 60vw;
  font-size: var(--font-size);
}
.container__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

直角文字

接著進入重頭戲，我們先設定文字的位置，分別是右上和左下，並且讓他稍微外移超過圖片，用 calc(-1 * var(—font-size))

並且用 grid-template-areas 的方式排版，這個排版方式超好用，可以自己命名每個區域，等等直接用 grid-area 就可以快速排版。

.container__text {
  position: absolute;
  display: grid;
}
.container__text.top-right {
  top: calc(-1 * var(--font-size));
  right: calc(-1 * var(--font-size));
  grid-template-areas:
    'horizontal corner'
    'empty vertical';
}
.container__text.bottom-left {
  bottom: calc(-1 * var(--font-size));
  left: calc(-1 * var(--font-size));
  grid-template-areas:
    'vertical empty'
    'corner horizontal';
}

接下來調整文字裡的 span 的位置，注意這裡可以用 writing-mode: vertical-lr 來讓文字變直行書寫，可以參考我以前的文章

.horizontal {
  grid-area: horizontal;
}
.corner {
  grid-area: corner;
  display: grid;
  place-content: center;
}
.vertical {
  grid-area: vertical;
  writing-mode: vertical-lr;
}

整個感覺都有了，接著加上 border 和 animation 就完成了～

直角文字 border

這裡不難，基本上就是根據文字的位置加 border 和 padding

/* Top Right */
.top-right .horizontal {
  padding-left: 8px;
  border-block: var(--border);
  border-left: var(--border);
}
.top-right .corner {
  border-top: var(--border);
  border-right: var(--border);
}
.top-right .vertical {
  padding-bottom: 8px;
  border-block: var(--border);
  border-bottom: var(--border);
}
/* Bottom Left */
.bottom-left .vertical {
  padding-top: 8px;
  border-block: var(--border);
  border-top: var(--border);
}
.bottom-left .corner {
  border-bottom: var(--border);
  border-left: var(--border);
}
.bottom-left .horizontal {
  padding-right: 8px;
  border-block: var(--border);
  border-right: var(--border);
}

直角文字 animation

要讓文字順時鐘或逆時鐘消失，可以利用 clip-path 來做到，我是控制 circle 的位置和大小，來達到類似的效果，看程式碼可能很難理解，下面我加上背景來演示～

.container__text.top-right {
  animation: ani-text-top-right 4s infinite alternate;
}
.container__text.bottom-left {
  animation: ani-text-bottom-left 4s infinite alternate;
}
.container__img {
  animation: ani-img 4s infinite alternate;
}
@keyframes ani-text-top-right {
  0%, 25% {
    clip-path: circle(0 at 0 0);
  }
  75%, 100% {
    clip-path: circle(120% at 100% 0%);
  }
}
@keyframes ani-text-bottom-left {
  0%, 25% {
    clip-path: circle(0 at 0 0);
  }
  75%, 100% {
    clip-path: circle(120% at 0 100%);
  }
}
@keyframes ani-img {
  0%, 10% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
  50%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

基本上到這邊就完成啦！這次教學用到很多實用的 CSS 屬性，例如 grid-areas-template、clip-path 以及比較冷門的 writing-mode

那今天就這樣，下篇貼文見～