It's a WIP for a GURPs character sheet, but the code is: <rolltemplate class="sheet-rolltemplate-skillRoll"> <br> <div class="sheet-skillRollContainer"> {{#rollLess() roll 5}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-green">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Critical Success!&nbsp;&nbsp;&nbsp;</div> {{/rollLess() roll 5}} {{#rollBetween() roll 5 6}} {{#rollLess() effectiveSkill roll}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-pink">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Failure&nbsp;&nbsp;&nbsp;</div> {{/rollLess() effectiveSkill roll}} {{#rollLess() roll minus9}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-green">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Critical Success!&nbsp;&nbsp;&nbsp;</div> {{/rollLess() roll minus9}} {{#rollBetween() roll minus9 effectiveSkill}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-blue">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Success&nbsp;&nbsp;&nbsp;</div> {{/rollBetween() roll minus9 effectiveSkill}} {{/rollBetween() roll 5 6}} {{#rollBetween() roll 7 16}} {{#rollBetween() roll 7 effectiveSkill}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-blue">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Success&nbsp;&nbsp;&nbsp;</div> {{/rollBetween() roll 7 effectiveSkill}} {{#rollGreater() roll effectiveSkill}} {{#^rollGreater() roll plus9}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-pink">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Failure&nbsp;&nbsp;&nbsp;</div> {{/^rollGreater() roll plus9}} {{#rollGreater() roll plus9}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-red">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Critical Failure!&nbsp;&nbsp;&nbsp;</div> {{/rollGreater() roll plus9}} {{/rollGreater() roll effectiveSkill}} {{/rollBetween() roll 7 16}} {{#rollTotal() roll 17}} {{#rollLess() effectiveSkill 16}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-red">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Critical Failure!&nbsp;&nbsp;&nbsp;</div> {{/rollLess() effectiveSkill 16}} {{#rollGreater() effectiveSkill 15}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-pink">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Failure&nbsp;&nbsp;&nbsp;</div> {{/rollGreater() effectiveSkill 15}} {{/rollTotal() roll 17}} {{#rollTotal() roll 18}} <div class="sheet-top"> <div class="sheet-rollBox sheet-rollBox-red">{{roll}}</div> <div class="sheet-topCenter">{{rollType}}</div> <div class="sheet-topRight"></div> </div> <div class="sheet-blocker sheet-crit">Critical Failure!&nbsp;&nbsp;&nbsp;</div> {{/rollTotal() roll 18}} <div class="sheet-middle"> <div class="sheet-middleLeft"></div> <div class="sheet-middleCenter"> <br> {{#allprops() roll rollType effectiveSkill minus9 plus9 r0 r1 r2}} <div class="sheet-content"> <div class="sheet-col1">{{key}}</div> <div class="sheet-col2">{{value}}</div> </div> {{/allprops() roll rollType effectiveSkill minus9 plus9 r0 r1 r2}} <div class="sheet-content"> <div class="sheet-col1"><b>Target</b></div> <div class="sheet-col2 bor">{{effectiveSkill}}</div> </div> <div class="sheet-content"> <div class="sheet-cols"> Roll : {{r0}}+{{r1}}+{{r2}} = {{roll}} </div> </div> <div class="sheet-content"> <div class="sheet-cols"> [Margin]&#40;&#33;&#13;Margin of Success/Failure=[[{{effectiveSkill}}-{{roll}}]]&#41; </div> </div> </div> <div class="sheet-middleRight"></div> <div class="sheet-downButton"></div> </div> <div class="sheet-bottom"> <div class="sheet-bottomLeft"></div> <div class="sheet-bottomCenter"></div> <div class="sheet-bottomRight"></div> </div> </div> </rolltemplate> and the CSS: .sheet-rolltemplate-skillRoll a[href^='!'], .sheet-rolltemplate-skillRoll a[href^='~']{ background-color:transparent; border:none; color:rgb(27,232,153); } .sheet-rolltemplate-skillRoll .sheet-top{ display:flex; } .sheet-rolltemplate-skillRoll .sheet-rollBox{ background-size:111px 36px; background-repeat:no-repeat; width:111px; height:36px; line-height:36px; color:white; font-weight: bold; text-align:center;text-shadow: 0 0 15px hsla(0, 0%, 100%, 1), 0 2px 4px hsla(0, 0%, 0%, 0.7); } .sheet-rolltemplate-skillRoll .inlinerollresult{ background-color:transparent; border-width:0 0 0 1px !important; border-color:transparent !important; padding:0; } .sheet-rolltemplate-skillRoll .sheet-rollBox-blue{ background-image:url("<a href="https://i.imgur.com/LdrB3MV.png" rel="nofollow">https://i.imgur.com/LdrB3MV.png</a>"); } .sheet-rolltemplate-skillRoll .sheet-rollBox-pink{ background-image:url("<a href="https://i.imgur.com/JjOaMG5.png" rel="nofollow">https://i.imgur.com/JjOaMG5.png</a>"); } .sheet-rolltemplate-skillRoll .sheet-rollBox-green{ background-image:url("<a href="https://i.imgur.com/ndz9fMu.png" rel="nofollow">https://i.imgur.com/ndz9fMu.png</a>"); } .sheet-rolltemplate-skillRoll .sheet-rollBox-red{ background-image:url("<a href="https://i.imgur.com/iw7rLJP.png" rel="nofollow">https://i.imgur.com/iw7rLJP.png</a>"); } .sheet-rolltemplate-skillRoll .sheet-topCenter{ background-image:url("<a href="https://i.imgur.com/DQ72si8.png" rel="nofollow">https://i.imgur.com/DQ72si8.png</a>"); background-size:100% 36px; background-repeat:no-repeat; height:26px; font-size:10px; padding-top:10px; padding-right:4px; white-space:nowrap; overflow:hidden; flex:1; min-width:24px; } .sheet-rolltemplate-skillRoll .sheet-topRight{ background-image:url("<a href="https://i.imgur.com/ihBceNj.png" rel="nofollow">https://i.imgur.com/ihBceNj.png</a>"); background-size:76px 36px; background-repeat:no-repeat; width:76px; height:36px; } .sheet-rolltemplate-skillRoll .sheet-blocker{ width:calc(100% - 24px); height:19px; margin-bottom:-19px; margin-top:-12px; z-index:1; text-align:right; } .sheet-rolltemplate-skillRoll .sheet-downButton{ background-image:url("<a href="https://i.imgur.com/IEL8taW.png" rel="nofollow">https://i.imgur.com/IEL8taW.png</a>"); background-size:20px 19px; background-repeat:no-repeat; width:20px; height:19px; margin-left:-29px; position:relative; top:-12px; } .sheet-rolltemplate-skillRoll .sheet-middle{ display:flex; overflow:hidden; padding-top:12px; cursor:pointer; } .sheet-rolltemplate-skillRoll .sheet-middle:not(:hover){ height:7px; } .sheet-rolltemplate-skillRoll .sheet-content{ display:flex; overflow:visible; } .sheet-rolltemplate-skillRoll .sheet-col1{ text-align:left; width:50%; position:relative; left:-101px; white-space:nowrap; } .sheet-rolltemplate-skillRoll .sheet-bor{ border-top:solid 1px rgb(27,232,153); } .sheet-rolltemplate-skillRoll .sheet-col2{ text-align:right; width:calc(50% + 50px); padding-right:16px; } .sheet-rolltemplate-skillRoll .sheet-cols{ text-align:right; width:calc(100% + 101px); padding-right:16px; white-space:nowrap; } .sheet-rolltemplate-skillRoll .sheet-middleLeft{ background-image:url("<a href="https://i.imgur.com/UxayCdn.png" rel="nofollow">https://i.imgur.com/UxayCdn.png</a>"); background-size:111px 100%; background-repeat:no-repeat; width:111px; } .sheet-rolltemplate-skillRoll .sheet-middleCenter{ flex:1; background:linear-gradient(to left,rgba(0,0,0,0) 12px,black 12px, black calc(100% - 6px)); } .sheet-rolltemplate-skillRoll .sheet-middleRight{ background-image:url("<a href="https://i.imgur.com/0ap9Rvd.png" rel="nofollow">https://i.imgur.com/0ap9Rvd.png</a>"); background-size:10px 100%; background-repeat:no-repeat; width:10px; position:relative; left:-12px; } .sheet-rolltemplate-skillRoll .sheet-bottom{ display:flex; } .sheet-rolltemplate-skillRoll .sheet-bottomLeft{ background-image:url("<a href="https://i.imgur.com/fNakDCG.png" rel="nofollow">https://i.imgur.com/fNakDCG.png</a>"); background-size:23px 11px; background-repeat:no-repeat; width:23px; height:11px; } .sheet-rolltemplate-skillRoll .sheet-bottomCenter{ background-image:url("<a href="https://i.imgur.com/nnjoCKn.png" rel="nofollow">https://i.imgur.com/nnjoCKn.png</a>"); background-size:100% 11px; background-repeat:no-repeat; flex:1; height:11px; } .sheet-rolltemplate-skillRoll .sheet-bottomRight{ background-image:url("<a href="https://i.imgur.com/VDvzPK6.png" rel="nofollow">https://i.imgur.com/VDvzPK6.png</a>"); background-size:22px 11px; background-repeat:no-repeat; width:22px; height:11px; } .sheet-rolltemplate-skillRoll .sheet-skillRollContainer{ color:rgb(27,232,153); padding-right:12px; margin-left:-42px; display:inline-flex; flex-direction:column; }