css - ハッシュされた境界線の CSS のみのデザイン

Question

画像を使用せずに CSS のみを使用して、このようなデザイン (縁取り) を行うことは可能ですか?

私たちのデザイナーの 1 人が私にそれを解雇しました。それはフォトショップの境界線かもしれないと思いますが、可能であれば画像の使用は避けたいと思っています。

ヒントをお寄せいただきありがとうございます。

Answer 1

はい、できます！素晴らしいcss3パターンで

これは大まかなデモです。

HTML:

<div class='pat-ho' ></div>
<div class='pat-ve' ></div>
<div class='text' >Text Text Text</div>

CSS:

    .pat-ho {
        position: absolute;
        width:500px; height:500px;
        background-color: gray;
        background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
        background-size: 20px 20px;
    }
    .pat-ve {
        position: absolute;
        width:450px; height:500px;
        background-color: gray;
        background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
        background-size: 20px 20px;
        left: 25px
    }
    .text {
        position: absolute;
        width: 470px;
        height: 470px;
        background: white;
        top: 25px; left: 25px;
    }

更新: Austin Prayによるより正確なデモがあります。

Answer 2

フレームのみの画像では、次のコードで遊ぶことができます: DEMO

#frame
{
   border: 20px;
   border-image: url("http://ohhs.ohsd.net/~brick/sci/images/20_20.gif") 27 round stretch;
   border-image-width: 15px; 
   background-color:lightgray;
}