偏りの背景は

Question

私は緑を取得しようとしている

.nav-bar { 
 
    position: relative; 
 
    background-color: red; 
 
} 
 
.nav-bar:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    overflow: visible; 
 
    width: 100%; 
 
    height: 10.938rem; 
 
    background: #1a5733; 
 
    z-index: -1; 
 
    -webkit-transform: skewY(-1.6deg); 
 
    -moz-transform: skewY(-1.6deg); 
 
    -ms-transform: skewY(-1.6deg); 
 
    -o-transform: skewY(-1.6deg); 
 
    transform: skewY(-1.6deg); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: initial; 
 
    display: block; 
 
} 
 
.nav-menu { 
 
    position: relative; 
 
}

<div class="nav-bar"> 
 
    <nav class="nav-menu"> 
 
    <a href="#" class="nav-link">Home</a> 
 
    <a href="#" class="nav-link">Sobre</a> 
 
    <a href="#" class="nav-link">Destaques</a> 
 
    <br> 
 
    <a href="#" class="nav-link">Contactos</a> 
 
    <br> 
 
    </nav> 
 
</div>

次の例を参照してください。コンテンツブロックの右下隅に配置DIV ナビゲーションバーを歪め：前の位置にnav-containerの右下に表示されますので、オーバーフローしてコンテナ内のコンテンツと一致します： （目的スクリーンサイズの下限を-25pxに変更しました。スクリーンリサイズでランダム結果が生成されました。

nav-bar:beforeエレメントに適用された1.6degスキューに基づいてボトム差を計算することはできますか？応答性を考慮してください。

または、メディアクエリのブレークポイントで手動で調整する場合ですか？

Answer 1

これを行うには、​​を要素に追加します。変換元をright bottomと設定すると、その点が固定されたまま変換が適用されます。誰もが興味を持っている場合は

.nav-bar { 
 
    position: relative; 
 
    background-color: red; 
 
} 
 
.nav-bar:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    overflow: visible; 
 
    width: 100%; 
 
    height: 10.938rem; 
 
    background: #1a5733; 
 
    z-index: -1; 
 
    -webkit-transform: skewY(-1.6deg); 
 
    -moz-transform: skewY(-1.6deg); 
 
    -ms-transform: skewY(-1.6deg); 
 
    -o-transform: skewY(-1.6deg); 
 
    transform: skewY(-1.6deg); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    transform-origin: right bottom; 
 
    display: block; 
 
} 
 
.nav-menu { 
 
    position: relative; 
 
}

<div class="nav-bar"> 
 
    <nav class="nav-menu"> 
 
    <a href="#" class="nav-link">Home</a> 
 
    <a href="#" class="nav-link">Sobre</a> 
 
    <a href="#" class="nav-link">Destaques</a> 
 
    <br> 
 
    <a href="#" class="nav-link">Contactos</a> 
 
    <br> 
 
    </nav> 
 
</div>