css - クリップパスとブートストラップを使用したマージントップレスポンシブ

Question

すべてのシナリオ、つまりさまざまなデバイス、またはマウスを使用してブラウザーのサイズを変更する場合に、margin:top の応答性を維持できる可能性があるかどうかを知りたいです。

HTML:

<div class="main container">
  <div class="col-md-12 left-border">
    <div class="col-md-12 left">

    </div>
  </div>
  <div class="col-md-12 left-Triangle-border float-left trinagle-left-position">
    <div class=" col-md-12 left-Triangle">

    </div>
  </div>
</div>

CSS:

.main{
  width: 300px;
  height: 300px;
  background: black;
}
.float-left{float:left;}

.trinagle-left-position{margin-top: -56px;}

.left {
    width: 100%;
    height: 100%;
    background: #1e90ff;
-webkit-clip-path: polygon(2% 2%, 99% 2%, 99% 99%, 2% 62%);
clip-path: polygon(2% 2%, 99% 2%, 99% 99%, 2% 62%);
}
.left:hover{
   opacity:0.5;
}
.left-border {
    width: 99%;
    height: 49%;
  float: left;
    background: black;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%);
}

.left-Triangle-border {
    width: 100%;
    height: 100%;
    background: black;
    -webkit-clip-path: polygon(0 0, 0% 100%, 97% 27%);
clip-path: polygon(0 0, 0% 100%, 97% 27%);
}
.left-Triangle {
    width: 100%;
    height: 50%;
    background: #1e90ff;;
-webkit-clip-path: polygon(1% 1%, 0 99%, 95% 27%);
clip-path: polygon(1% 1%, 0 99%, 95% 27%);
}
.left-Triangle:hover{
   opacity:0.5;
}

html, body { height: 100%; }
body {
    display: flex;
    justify-content: center;
    align-items: center;
}

これが私のjsFiddleです。ここで欲しいのは、以下の画像で言及されていることです。

これらは、css クリップパス ポリゴンを使用して開発しようとしている 2 つの形状です。しかし、緑色で塗りつぶされたdivにマージントップを与え、ブラウザウィンドウのサイズを変更すると、その位置が含まれません。

私が見つけた1つの解決策は、メディアクエリを使用し、メディアクエリに基づいてマージントップを変更することです. ただし、ブラウザのサイズを変更すると機能しません。

ブートストラップを使用してマージントップをレスポンシブにできる場合、これについて何か考えはありますか?