用css实现浮雕/倾斜/ 3d边框效果

Question

我试图弄清楚如何通过仅使用css来实现元素底部的跟随边框，并尽可能使其成为非常友好的交叉浏览器

示例代码，标准边框

<div class="object"></div>

.object {
    width: 200px;
    height: 45px;
    background-color: orange;
    margin: 20% auto 0 auto;

    border-bottom: 5px solid green; /*Needs to be changed to get effect*/
}

Answer 1

在这里，您将使用一些伪元素和CSS边界魔法。请注意，您必须知道父元素的背景颜色才能使用。根据您的要求，使用:after这应该是compatible with IE8+并在旧浏览器中优雅地回退。

这可以通过理解CSS方向边框在其方向上以45°切割来实现，以便您能够以不同方式设置不同侧面的样式（例如border-right剪切border-top和{{ 1}}等等）。通过巧妙地使用边框属性和位置，您可以创建角度形状的效果。

由于这个原因，

创建集中浮雕 3d效果不需要任何其他元素，只需仔细使用边框。

只需将border-bottom设置为颜色，border-bottom和right设置为left即可实现此类效果。

但是，由于你想要一个额外的剪切，我们使用一个伪元素，给它一个三角形形状，并将它重叠在父元素边框上;通过这种方式，我们得到了你所需要的东西。

Working example