Fond dégradé translucide linéaire /nettoyer css/

Comment créer un tel effet de dégâts du texte avant que le texte soit limité:
https://i.stack.imgur.com/LiTTy.jpg
sous forme pure css

.

Je préférerais ajouter du style dans le champ sous le texte de décomposition.

Devrais-je travailler avec une boîte à bordure ou un autre élément? Tout fragment d'un code compatible avec tous les navigateurs est très apprécié.
Invité:

Hannah

Confirmation de:

Vous voilà. Vous pouvez le faire en utilisant l'article
::after

avec
position: absolute;

, Et il chevauchera le texte dans le conteneur.

Avec l'aide de cette CSS vous pouvez ajouter
.short-box

À n'importe quel bloc, et cela recevra l'atténuation de gradient souhaitée.


.short-box {
/* if you want to hide a part of text */
height: 150px;
overflow: hidden;
/* for :after to follow the paretn position */
position: relative;
}

.short-box::after {
content: '';
position: absolute;
width: 100%;
height: 50px; /* here you can use `%` instead of `px`, so this block height will depends on parent height */
bottom: 0;
left: 0;
z-index: 2;
background: linear-gradient/to bottom, rgba/255, 255, 255, 0/ 0%, rgba/255, 255, 255, 1/ 100%/;
}



<div class="short-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Pour répondre aux questions, connectez-vous ou registre