W2U開発wiki - HTML5 CSS3 はんこ

実装イメージ



HTML

<div class="hanko">2011/05/21</div>

CSS

.hanko
{
   width              :100px;
   height             :100px;
   border-radius      :50px;
   font-family        :sans-serif; 
   color              :rgba(217,51,63,0.9); 
   border             :5px solid rgba(217,51,63,0.9);
   text-shadow        :#a22041 1px 1px 1px ;
   text-align         :center; 
   line-height        :100px;
   border             :5px solid rgba(217,51,63,0.9);
   border-radius      :50px;
   position           :relative;
   -webkit-transform  :rotate(-20deg);
   -moz-transform     :rotate(-20deg);
   -o-transform       :rotate(-20deg);
   transform          :rotate(-20deg);
   overflow           :hidden; 
}

.hanko:before,.hanko:after
{
   width              :150px;
   height             :33px;
   text-align         :center;
   position           :absolute;
   left               :50%;
   margin-left        :-75px;
   font-size          :30px;
   line-height        :normal;
}
.hanko:before
{
   content            :'承';
   top                :2px;
   border-bottom      :3px solid rgba(217,51,63,0.9);
}
.hanko:after
{
   content            :'認';
   top                :62px;
   border-top         :3px solid rgba(217,51,63,0.9);
}