I've styled my roll template to resemble torn pieces of paper. I used div backgrounds at the top and bottom of the template to give it the tears. To help sell the aesthetic I also gave the whole thing a subtle tilt. That tilt is causing me a weird issue where the top and bottom divs disappear and reappear. I think its an issue with the way Roll20's Chat bar handles it's messages and the rotate template 'clipping' it. Has anyone encountered this before, maybe figured out a work around? Here the roll template in case anyone wants to recreate the effect. .sheet-rolltemplate-core {
}
.sheet-rolltemplate-core .sheet-scraps_1 {
filter: drop-shadow(0px 5px 10px black);
overflow: visible;
transform: rotate(1deg);
}
.sheet-rolltemplate-core .sheet-scraps_1_body {
background: #fdfef9;
padding: 6px;
}
.sheet-rolltemplate-core .sheet-scraps_1_top {
background-image: url("<a href="https://i.imgur.com/awHCJ8P.png" rel="nofollow">https://i.imgur.com/awHCJ8P.png</a>");
background-repeat: repeat-x;
background-position: center;
height: 30px;
width: 100%;
}
.sheet-rolltemplate-core .sheet-scraps_1_bottom {
background-image: url("<a href="https://i.imgur.com/fdTFQ9k.png" rel="nofollow">https://i.imgur.com/fdTFQ9k.png</a>");
background-repeat: repeat-x;
background-position: center;
height: 30px;
width: 100%;
}
<rolltemplate>
<div>
<div></div>
<div>
Blah blah blah.
</div>
<div class="scraps_1_bottom></div>
</div>
</rolltemplate>
