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;

そして、それだけのはずです... :)