用CSS围绕容器边缘的花式对角线

Question

我愿意在容器周围实现花哨的对角线边框效果我想通过CSS来设置它我知道通过使用伪元素之前和之后我们可以在容器周围设置不同的排序或边框但是这里的情况不同你可以在附图中看到。

非常感谢。

Answer 1

如果您想将pseudo elements用于此目的，可以尝试：

CSS：

.checked {
    background-image:url('http://subtlepatterns.com/patterns/old_map.png');
    background-repeat:repeat;
    width:400px;
    height:auto;
    padding:10px;
    position:relative;
}
.checked div {
    background-image:url(http://i.stack.imgur.com/GIHQn.jpg);
    padding:10px;
}
.checked img {
    max-width:100%;
}
div.checked:after {
    position: absolute;
    content:"";
    bottom: 10px;
    left: 10px;
    height: 10px;
    width: 10px;
    background: inherit;
    z-index:1;
}
div.checked:before {
    position: absolute;
    content:"";
    top: 10px;
    right: 10px;
    height: 10px;
    width: 10px;
    background: inherit;
    z-index:1;
}

HTML：

<div class="checked">
    <div>
        <img src="http://s3.amazonaws.com/fiverr.com/deliveries/45941/large/Cartoons_Caricatures_work_sample_from_pixzyl_1349432179.jpg?1349432179" />
    </div>
</div>

演示：http://jsfiddle.net/lotusgodkk/GCu2D/180/

Answer 2

我认为在上图中，图像被用作边框。您可以将任何图像用作边框。这是一个例子。如何使用图像作为边框：

div {
-webkit-border-image:url(border.png) 30 30 round; /* Safari 3-5 */
-o-border-image:url(border.png) 30 30 round; /* Opera 11-12 */
border-image:url(border.png) 30 30 round;
}

css语法：border-image：源切片宽度outset repeat | initial | inherit;