CSS歪み矩形がコンテナの外に出る

Question

私は赤いコンテナを持っていますが、変換元が左下に設定されています。下の図は、赤いボックスが外に出てはならない親コンテナのパディングを強調表示しています。

スキュー効果が右上の角度がコンテナ要素の周囲をオーバーフローする場合は、応答で正常に動作しなく。これは、現在の動作や赤い長方形である：

そして、これは私がそれを達成したい動作です。

アイデア：スキューボックスは完全にこのように、容器詰めで区切られた境界線の内側に滞在する必要がありますか？あなたはCSS 3のcalc関数を使用することができ

.container { 
 
    padding: 20px; 
 
    outline: 1px solid black; 
 
    display: inline-block; 
 
} 
 

 
.red-box { 
 
    background-color: red; 
 
    color: white; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    
 
    transform: skew(-35deg); 
 
    transform-origin: bottom left; 
 
} 
 

 
.red-box > div { 
 
    padding: 0 10px; 
 
    transform: skew(35deg); 
 
}

<div class="container"> 
 
    <div class="red-box"> 
 
    <div>PARKS AND GARDENS IN LONDON</div> 
 
    </div> 
 
    <img src="https://www.vivilondra.it/images/vivilondra/images2/regents-park-top.jpg" /> 
 
</div>

Answer 1

ありがとうございます。@neallredのおかげで、私は三角法のルールを使って解決策を見つけました。

赤いボックスの幅は、スキュー変換で使用された度の正接を乗じた高さからその100％を引いた値に設定する必要があります。従って：

width: 100% - height * tan(35)。

スニペットでできるだけ少ないリテラルを使いたいので、赤いボックスのテキストを1行にとどめて、ボックスの正確な高さを1em + vertical_paddingとし、上記の式を100% - (1em + vertical_padding) * 0.700208と書き直しました。前にline-height: 1emを強制します。

.container { 
 
    padding: 20px; 
 
    outline: 1px solid black; 
 
    display: inline-block; 
 
} 
 
.red-box { 
 
    background-color: red; 
 
    color: white; 
 
    padding: 10px; 
 
    margin-bottom: 10px; 
 
    transform: skew(-35deg); 
 
    transform-origin: bottom left; 
 
    
 
    box-sizing: border-box; 
 
    width: calc(100% - (1em + 20px) * 0.700208); 
 
} 
 
.red-box > div { 
 
    padding: 0 10px; 
 
    transform: skew(35deg); 
 
    
 
    white-space: nowrap; 
 
    text-overflow: ellipses; 
 
    overflow: hidden; 
 
    line-height: 1em; 
 
}

<div class="container"> 
 
    <div class="red-box"> 
 
    <div>PARKS AND GARDENS IN LONDON</div> 
 
    </div> 
 
    <img src="https://www.vivilondra.it/images/vivilondra/images2/regents-park-top.jpg" /> 
 
</div>

私は他の誰を助けるかもしれない願っています。

Answer 2

：

このスニペットは、私の場合を再生します。上端がどれだけずらされているかを計算し、それを100％の幅から減算します。 developer.mozilla.org/en-US/docs/Web/CSS/calcを参照してください

測定値を把握しましたか？これは三角法の問題です。私は背の高い側が元の赤い箱（またはh）の罪（55度）*高さだと思う。これは0.819 * hとなります。短い側はcos（55度）* h、つまり0.574 * hです。新しい箱をそれほど短縮する必要があるので、短い（底）側について知る必要があります。 h_final = 0.574 * hの場合は、

.red-box { 
    . 
    . 
    . 
    width: calc(100% - h_finalpx) 
}