随着Web技术不断的革新，以往很多依赖于图片展示的布局能较轻易地通过代码来实现，而且现在的布局也不仅仅局限于平面的布局。实际上也有一些伪3D，甚至是3D的布局效果。前两天看到@Preethi分享的一个效果就是我们平时难于用代码实现的一个效果。就这样的效果放到今天来说，我们通过CSS可以实现，而且这样的一个效果是一个典型的效果，所以今天和大家一起来探讨这样的一个布局效果。

刚才提到借助于Web的一些特性，我们可以实现伪3D的效果（看上去像上一个3D的布局）。这样的布局主要目的是为了增强一个立体的空间感。比如我们常见的层叠的效果，飘带等效果，如下图所示：

还有一些效果类似于@Preethi提到的效果：

这样的交叉效果就是我们今天要深入聊的一个效果。也就是说，我们今天的目标是要和大家一起实现@Preethi在《Weaving One Element Over and Under Another Element》一文中提到的效果：

就上图这样的一个效果，看上去是一张图片穿叉在一个边框中，但一般穿叉的效果是图片在边框的下面或图片在边框的上面。但要实现上图的效果，还着实不是一件易事。那么问题了，如果你的业务中要实现上图这样的一个效果，你会怎么来做呢？

简单地分析一下

拿到这样的一个效果，一眼看上去就是两个层：

如果用两个层来处理的话要实现我们想要的效果还是有一定的难度的。按照两层的思路来做，实现的效果是红框在图片的上面或者红框在图片的下面：

如果用代码来写的话，会很简单：

<!-- HTML -->
<div class="design">
    <img src="//www.w3cplus.com/sites/default/files/blogs/2019/1910/photo-1511692277506-3be3a7ab1686.jpeg" alt="">
    <div class="design__border"></div>
</div>

// CSS
.design {
    position: relative;
    height: 300px;
    width: 300px;
}

.design > * {
    position: absolute;
    height: 100%;
    width: 100%;
}

.design__border {
    box-sizing: border-box;
    border: 15px #eb311f solid;
    transform: rotate(45deg);
    box-shadow: 0 0 10px #eb311f, inset 0 0 20px #eb311f;
}

效果会如下所示：

这离我们想要的效果还是非常的遥远。但要实现最终的效果还是有一定的方案的。比如：

将旋转的边框拆分成多分

就效果而言，两条边在图片上面，另外两条边在图片下面。按照这样的思路，我们可以将design__border元素的border拆分出来。可以借助::before和::after来做。比如：

<!-- HTML -->
<div class="design">
    <img src="//www.w3cplus.com/sites/default/files/blogs/2019/1910/photo-1511692277506-3be3a7ab1686.jpeg" alt="">
</div>

// CSS
.design {