[CSS] CSSで作る印影（印鑑、ハンコ、判子）っぽいもの

背景

「画面にハンコを表示してくれ！」という要望は多……くはないですよね……。

ImageMagickかな、SVGかな、どうやって作ろうか悩んでいたら、

「見た目だけハンコっぽくなっていればいいから！」ということで、CSSで作ることにしました。

完成イメージ

できあがりのイメージです。
↓↓↓

名前が長いとはみ出すので、印影用に別名を用意するのがおすすめです。

ソース

stamp.html

<div class="stamp stamp-approve">
<span>2016.6.4</span>
<span>井之頭五郎</span>
</div>

border-radiusで丸くして、position:absoluteで無理やり位置合わせしています。

stamp.css

.stamp { font-size:10px; border:3px double #f00; border-radius:50%; color:#f00; width:64px; height:64px; position:relative; margin:auto; }
.stamp span { display:inline-block; width:100%; text-align:center; }
.stamp span:first-child::before { position:absolute; top:5px; left:0; right:0; margin:auto; width:80%; border-bottom:1px solid #f00; line-height:1; padding-bottom:3px; }
.stamp span:first-child { line-height:56px; }
.stamp span:last-child { position:absolute; top:38px; left:0; right:0; margin:auto; width:80%; border-top:1px solid #f00; padding-top:2px; line-height:1; }

.stamp-approve span:first-child::before {
  content:"承認";
}

お試し

こちらでお試しください。

https://jsfiddle.net/g5x8yp14/2/