TAG
CSS
JavaScript
Result
Run
License
<button type="button" id="btn-print">Open Print Preview</button> <section class="section1"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </section> <section class="section2"> <p> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </section> <section class="section3"> <p> It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </section>
section { position: relative; } section:nth-of-type(2) { break-before: page; background-color: hwb(57deg 80% 0%); } section::before { content: attr(class); position: absolute; top: -10px; color: red; display: block; transform-origin: 0% 50%; transform: rotate(-15deg); }
window.addEventListener("load", () => { const elBtn = document.getElementById("btn-print"); elBtn.onclick = e => window.print(); });
Console
expand_less
License
License
by DevDic
Close