Дайте больше стиля div div

Question

Я пытаюсь добавить отражение в div, используя следующий css.

CSS ::

div.reflection 
{ 
    -webkit-transform: scaleY(-1); 
    -moz-transform: scaleY(-1); 
    -o-transform: scaleY(-1); 
    -ms-transform: scaleY(-1); 
    transform: scaleY(-1); 
    opacity:0.6; 
    background-color: red; 
    position:absolute; 
    top:82%; 
    height:30%; 
    width:100%; 

} 

Отражение приходит, но его просто зеркально отразить изображение с более низким значением непрозрачности. Как я могу добавить больше стиля для отражения, я хочу дать отражение, как показано на рис ниже ..

но с моей CSS я получаю это,

Answer 1

Есть несколько возможностей для достижения этой цели:

можно определить SVG (или градиентное изображение) и маску изображения отражения с тем или даже использовать mask-image property и использовать градиент, чтобы замаскировать изображение:

This Example показывает оба метода. Webkit использует

div::after{ 
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1)); 
} 

и Firefox СВГ с маской:

<svg> 
    <defs> 
    <linearGradient id="gradient" x1="0" y1="0%" x2 ="0" y2="100%"> 
     <stop stop-color="black" offset="0"/> 
     <stop stop-color="white" offset="1"/> 
    </linearGradient> 
    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> 
     <rect y="0.3" width="1" height=".7" fill="url(#gradient)" /> 
    </mask> 
    </defs> 
</svg> 

div::after{ 
    mask: url(#mask); 
}