1

我试图弄清楚如何通过仅使用 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*/
}

在此处输入图像描述

4

1 回答 1

1

给你，一个使用一些伪元素和 CSS 边框魔法的例子。请注意，您必须知道父元素的背景颜色才能正常工作。根据您的要求，使用:after它应该与 IE8+ 兼容并在旧浏览器中优雅地回退。

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

由于这个原因，创建中央浮雕3d 效果不需要任何其他元素，但要小心使用边框。

中央3d浮雕

border-bottom只需将 设置为 color 和right设置left为就可以达到这种效果transparent。

然而，因为你想要一个额外的剪辑，我们使用一个伪元素，给它一个三角形并将它重叠在父元素的边界上；这样我们就能得到你所需要的。

Working example

于 2013-03-08T17:10:22.823 回答