【CSS】CSS で作ったハンコのようなもの

世が令和になっても歴史は繰り返されます。
[CSS] CSSで作る印影（印鑑、ハンコ、判子）っぽいもの と同じような経緯から CSS ハンコを作成することになりました。

やはり要望は多くはないと思いますが上記記事とは別パターンでの CSS ハンコの作成方法ということで記しておきます。

See the Pen eYNyrEd by ari3der (@ari3der) on CodePen.

特に特殊なことはしていないと思いますがせめてハンコの大きさに応じて font-size がいい感じになるようにだけ調整しました。

hanko.html

<div class="hanko">
  <span>営業1課</span>
  <hr noshade>
  <span>2020/03/01</span>
  <hr noshade>
  <span>たかし</span>
</div>

hanko.scss

$hanko-size: 100px;
.hanko {
  font-size: 16px * ($hanko-size / 100px);
  border:3px * ($hanko-size / 100px) double #f00;
  border-radius: 50%;
  color: #f00;
  width: $hanko-size;
  height: $hanko-size;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  hr {
    width: 100%;
    margin: 0;
    border-color: #f00;
  }
}