CSSの放射状勾配パターンが四角形のときに壊れるのはなぜですか？

Question

私は放射状の勾配のドットパターンの背景を持つボックスを持っています。 padding-bottom: 100%プロパティを使用して正方形にすると、ドットパターンは期待通りに機能します。モバイルデバイスに切り替えるときは、このボックスを四角形にする必要があるので、パディングボトムを45％に変更しました。 45％ではドットパターンは表示されず、パディングボトムが75％未満の場合はドットパターンはまったく表示されません。何故ですか？希望の効果を出すために何ができるか。理想的には、任意のサイズのボックスでパターンが機能します。

ここに問題を示すjsfiddle>https://jsfiddle.net/があります。赤い四角いボックスはドットパターンを持ち、四角い紫のボックスはドットがありません。

洞察力やアドバイスをいただければ幸いです。ここで

は、私が説明していますかを示した画像です：私は（前::）正方形の擬似要素を作成に回避策を考え

Answer 1

をし、それに繰り返し放射状の背景を適用します矩形クラスにoverflow: hiddenを追加します。これがあなたを助けてくれると願っています

注：::before要素の幅と高さがメイン要素よりも大きいことを確認してください。

.box { 
 
    background: blue repeating-radial-gradient(red, red 2px, transparent 2px, transparent 100%); 
 
    background-size: 4px; 
 
    padding-bottom: 100%; 
 
    position: relative; 
 
    } 
 
    
 
    .box:after { 
 
    box-shadow: inset 0 0 90px 40px rgba(0, 0, 0, .75); 
 
    content: ''; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    } 
 
    
 
    .container { 
 
    width: 610px; 
 
    height: 385px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
    
 
    } 
 
    
 
    .rectangle { 
 
    padding-bottom: 45%; 
 
    position: relative; 
 
    overflow: hidden; 
 
    } 
 
    .rectangle:before { 
 
    content: ''; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 1000px; 
 
    height: 1000px; 
 
    background: green repeating-radial-gradient(purple, purple 2px, transparent 2px, transparent 100%); 
 
    background-size: 4px; 
 
    z-index: 0; 
 
    } 
 
    .rectangle:after { 
 
    box-shadow: inset 0 0 90px 40px rgba(0, 0, 0, .75); 
 
    content: ''; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    z-index: 1; 
 
    }

<div class="container"> 
 
    <div class="box"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="rectangle"></div> 
 
</div>