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>