html - 使用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° Angular 切割来实现的，以便您能够为不同的边设置不同的样式(例如 border-right 切割 border-top 和 border-bottom 等)。通过巧妙地使用边框属性和位置，您可以创建 Angular 形状效果。

创建一个中心浮雕的 3d 效果不需要任何其他元素，但要小心使用边框。

这样的效果只需要设置border-bottom为颜色，right和left为transparent.

但是，由于您需要额外的切割，我们使用了一个伪元素，给它一个三 Angular 形并将其重叠在父元素的边界上；通过这种方式，我们可以获得您所需要的。

Working example