css - CSS3を使用してこのタイプの境界線を作成するにはどうすればよいですか？

Question

CSS3を使用してこのタイプの境界線を作成することは可能ですか？

Answer 1

可能ですが、画像とborder-imageプロパティを使用する必要があります。

http://www.w3.org/TR/css3-background/#the-border-image

http://css-tricks.com/understanding-border-image/

Answer 2

これを作成するためのハックをテストします。2 つの div で最初の 1 つが背景の線形グラデーションで境界線を作成します。2 つ目は、コンテンツを配置するために使用します。

私のCSSスニペットがあります：

div {
    background-color: gray;
    width: 200px;
    height: 200px;
}
.border {
    background-image: -webkit-linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%, white ), 
    -webkit-linear-gradient(-45deg, white 25%, transparent 25%, transparent 75%, white 75%, white );
    background-size: 10px 10px;
    padding:5px;
}

そして、私のフィドルを見ることができます： http://jsfiddle.net/DoubleYo/zSnDG/1/

Answer 3

これは、border-imageプロパティをよく読んでください。

http://ejohn.org/blog/border-image-in-firefox/