html - Css 形状 z-index 和边框

Question

我试图制作一个 CSS 形状，但我遇到了菱形边框的问题

菱形的边框在不该出现的时候出现了...

在这里，您有带有 css 和 html 的代码。

对不起我糟糕的英语。

提前致谢

编辑：

我不想要菱形的顶部边框......

http://i.imgur.com/bAAPlv4.png

Answer 1

我不太了解您的问题，但是如果结果类似于此 http://imgur.com/YGodaat 只需将z-index:-1添加到您的div#barra:after元素...

如果这不是您想要的，请向我们解释您想要实现的目标。

/编辑/

id="barra" 需要这些修改：

    background: linear-gradient(180deg, rgba(196, 196, 196, 1) 0%,rgba(147,147,147,1) 100%,rgba(125,185,232,1) 100%);
    box-shadow: 5px 5px 10px rgb(148, 146, 146);

barra:after 需要这个：

    background: linear-gradient(135deg, rgba(155, 155, 155, 1) 0%,rgba(147,147,147,1) 100%,rgba(125,185,232,1) 100%);
    z-index:-1;

应该就是这样...... :)