cssで太いから薄いボーダー/ボックスシャドウを作成する

Question

可能な限り最良の方法で、以下の画像を見てどうすればいいですか？私は太い上の境界線が欲しいですが、それが下がるにつれて、両側がより薄くなり、黒いブロックに（それが正しいとすれば）ちょうど "修正"したいです。

これは、黒ブロックのための私のCSSコードです：

.containerMain { 
    background: #000; 
    padding: 15px; 
    border-radius: 5px; 
    width: 250px; 
} 

Answer 1

あなたはあなたの要素の後ろに逆さ台形を配置するafter擬似要素を使用することができます。

台形形状の例については、hereを参照してください。

body { padding: 30px; } 
 

 
.containerMain { 
 
    background: black; 
 
    padding: 15px; 
 
    border-radius: 5px; 
 
    width: 250px; 
 
    height: 250px; 
 
    position: relative; 
 
} 
 

 
.containerMain:after { 
 
    content: ''; 
 
    border-radius: inherit; 
 
    margin: -20px; 
 
    margin-top: -25px; 
 
    width: 100%; 
 
    height: 50%; 
 
    position: absolute; 
 
    z-index: -1; 
 

 
    /* upside-down red trapezoid props */ 
 
    border-top-width: 150px; 
 
    border-top-style: solid; 
 
    border-top-color: red; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
}

<div class="containerMain"></div>