純粋なCSSレスポンデッド台形ボーダーと背景色

Question

私はすでに3つのdivブロックを使用して1つを作成しましたが、私は上部にボーダーを取得できません応答台形を作成したいと思いました幅と高さが変更されたときに台形のインラインを維持する だから私の質問です。 誰かが左と右の境界線に沿って台形の上に線を維持する方法を理解するのを助けることができます 誰かが別の解決策を知っていたら？ ここに私のコードです....

.trapezoid-container{ 
 
    \t position: relative; 
 
    margin-left: 100px; 
 
    width: 200px; 
 
    height: 200px; 
 
    
 
    } 
 
.trapezoid { 
 
\t background: green; 
 
\t position: relative; 
 
\t position:absolute; 
 
    \t content:""; 
 
\t width: 70%; 
 
\t height: 100%; 
 
\t border-top: 5px solid black; 
 
\t border-bottom: 5px solid black; \t 
 
\t left: 20px; 
 
} 
 
.trapezoid:before { 
 
\t background: green; 
 
\t position:absolute; 
 
    \t content:""; 
 
\t width: 60%; 
 
height: 100%; 
 
left: 63%; 
 
border-right: 5px solid black; 
 
border-bottom: 5px solid black; 
 
transform: skew(20deg); \t 
 
} 
 
.trapezoid:after { 
 
\t background: green; 
 
\t position:absolute; 
 
    \t content:""; 
 
\t width: 60%; 
 
height: 100%; 
 
left: -28%; 
 
border-left: 5px solid black; 
 
border-bottom: 5px solid black; 
 
transform: skew(-20deg); 
 
}

<div class="trapezoid-container"> 
 
<div class="trapezoid"> 
 
</div> 
 
    </div>

みんなありがとうは:)

Answer 1

私の質問に答えるHow to draw a trapezium/trapezoid with css3?で見つかったより良い解決策は、idはポストと思って

#container { 
 
\t position: relative; 
 
\t margin-left: 200px; 
 
width: 200px; 
 
height: 200px; 
 
\t 
 
} 
 

 
.trapezoid { 
 
\t position: relative; 
 
\t width: 30%; 
 
    height: 50%; 
 
    background: red; 
 
    transform: perspective(2px) rotateX(1deg); 
 
    border: solid 4px black; 
 
    left: 20%; 
 
    top: 70%; 
 
}

<div id="container"> 
 
<div class="trapezoid"> 
 

 
</div></div>