0

I am trying to make a website that looks like a giant ticket, so no matter how much content there is on the page, it should always look like a ticket.

Requirements:

  • Ticket should always cover entire page;
  • Bottom part should support overflowing content;
  • Scrollbar should be on ticket/page and not on part of the ticket;

Here is what I have so far:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      html,
      body {
        /* height: 100%; */
        margin: 0;
      }

      body {
        background-color: white;
      }

      #container {
        overflow-y: auto;
      }

      #ticket {
        position: fixed;
        top: 0;
        left: 0;
        padding: 5px;
        height: 100%;
        width: 100%;
        filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
      }

      #topPart {
        clip-path: polygon(
          0% 0%,
          100% 0%,
          100% 67px,
          calc(100% - 25px) 77px,
          25px 77px,
          0% 67px
        );
        background-color: tomato;
        height: 75px;
        width: 100%;
        border-bottom: 2px dashed white;
      }

      #bottomPart {
        background-color: tomato;
        clip-path: polygon(
          25px -2px,
          calc(100% - 25px) -2px,
          100% 8px,
          100% 100%,
          0% 100%,
          0% 8px
        );
        height: calc(100% - 75px - 5px);
        border-top: 2px dashed white;
        padding: 5px;
        overflow-y: auto;
      }

      #content {
        height: 300vh;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="ticket">
        <div id="topPart"></div>
        <div id="bottomPart">
          <div id="content">content</div>
        </div>
      </div>
    </div>
  </body>
</html>

As you can see, the scrollbar is currently on the bottom part of the ticket, which is undesirable.

So I tried moving the scrollbar up to it's parent element, like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      html,
      body {
        /* height: 100%; */
        margin: 0;
      }

      body {
        background-color: white;
      }

      #container {
        overflow-y: auto;
      }

      #ticket {
        position: fixed;
        top: 0;
        left: 0;
        padding: 5px;
        height: 100%;
        width: 100%;
        filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
        overflow-y: auto;
      }

      #topPart {
        clip-path: polygon(
          0% 0%,
          100% 0%,
          100% 67px,
          calc(100% - 25px) 77px,
          25px 77px,
          0% 67px
        );
        background-color: tomato;
        height: 75px;
        width: 100%;
        border-bottom: 2px dashed white;
      }

      #bottomPart {
        background-color: tomato;
        clip-path: polygon(
          25px -2px,
          calc(100% - 25px) -2px,
          100% 8px,
          100% 100%,
          0% 100%,
          0% 8px
        );
        height: calc(100% - 75px - 5px);
        border-top: 2px dashed white;
        padding: 5px;
      }

      #content {
        height: 300vh;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="ticket">
        <div id="topPart"></div>
        <div id="bottomPart">
          <div id="content">content</div>
        </div>
      </div>
    </div>
  </body>
</html>

But as you can see, this makes the fixed ticket longer than the actual page and allows you to scroll past the ticket, which is undesirable.

I have also tried solutions from this thread:

CSS Stretch content container height if empty overflow if too big

But unfortunately none of them worked for me.

CvP
  • 324
  • 1
  • 4
  • 17

3 Answers3

1

This solution might be (admittedly) very hacky, but solves your requirements. Placing the content outside of the fixed elements and using z-index values on fixed elements can allow you to hide (or show) what is visible (see snippet). I added filler content to demonstrate the results.

I moved the #content ID out of the #ticket element to separate it from its former parents and allow it to scroll and not be fixed in position. I added a few other position, z-index and other position and style values on the ticket elements to keep the appearance you are looking for.

I am assuming you want the scrollbar outside of the ticket and want the scrollbar track to be the height of the ticket/page. I added some other elements (#filler and #dash) to cover up the overflow text on top with the same color as the ticket and recreate the top/bottom border between the top and bottom parts. If you need content in the top part of the ticket, it can be added below the "ticket" (outside the #container #ticket IDs). If you want to adjust the height of the top area a variable can be set and used to replace some of the heights in the CSS, with some additional adjustments.

Again, I would stress this is an imperfect solution, but your requirements are not part of the typical functionality of standard HTML and CSS. If anyone has another approach in HTML and CSS I encourage them to share, and if you would like to use JavaScript there are other options with that, as well.

Techniques can be reviewed in the MDN Web docs for z-index and MDN Web docs for position. Disclaimer: I have not done cross-browser checking for the solution to your question.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html {
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    html,
    body {
      /* height: 100%; */
      margin: 0;
    }
    
    body {
      background-color: white;
    }
    
    #container {
      overflow-y: auto;
    }
    
    #ticket {
      position: fixed;
      top: 0;
      left: 0;
      padding: 5px;
      height: 100%;
      width: 100%;
      filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
    }
    
    #topPart {
      position: fixed;
      top: 5px;
      left: 5px;
      clip-path: polygon(0% 0%, 100% 0%, 100% 67px, calc(100% - 25px) 77px, 25px 77px, 0% 67px);
      background-color: tomato;
      height: 75px;
      width: calc(100% - 10px);
      z-index: 4;
    }
    
    #bottomPart {
      position: fixed;
      top: 80px;
      left: 5px;
      background-color: tomato;
      clip-path: polygon(25px -2px, calc(100% - 25px) -2px, 100% 8px, 100% 100%, 0% 100%, 0% 8px);
      height: calc(100% - 75px - 10px);
      width: calc(100% - 10px);
      border-top: 2px dashed white;
      padding: 5px;
      z-index: -1;
    }
    
    #content {
      position: absolute;
      top: 6px;
      left: 25px;
      height: calc(100vh - 12px);
      width: calc(100% - 25px);
      padding-right: 25px;
      padding-top: 80px;
      overflow-y: auto;
      z-index: 1;
    }
    
    #filler {
      position: fixed;
      top: 5px;
      left: 25px;
      height: 80px;
      width: calc(100% - 50px);
      background-color: tomato;
      z-index: 2;
    }
    
    #dash {
      position: fixed;
      top: 80px;
      left: 25px;
      height: 4px;
      width: calc(100% - 50px);
      background-color: tomato;
      border-top: 2px dashed white;
      border-bottom: 2px dashed white;
      z-index: 3;
    }
  </style>
</head>

<body>

  <div id="container">
    <div id="ticket">
      <div id="topPart"></div>
      <div id="bottomPart"></div>
    </div>

    <!-- filler and dash border -->
    <div id="filler"></div>
    <div id="dash"></div>

    <!-- text content, with more added for demonstration -->
    <div id="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi suscipit sem dignissim bibendum. Etiam a vehicula nisl. Maecenas dignissim, urna non facilisis hendrerit, metus urna interdum tellus, quis rutrum justo mauris vitae
        massa. Nunc eu ultrices sapien. Morbi ultrices gravida maximus. Sed sit amet lectus leo. Donec vulputate arcu vitae orci facilisis elementum a a lorem. In accumsan, erat ac commodo molestie, ligula tellus consectetur odio, non congue ante urna
        eu erat. Morbi nec iaculis mauris. Vivamus suscipit rhoncus metus, eu rhoncus ipsum bibendum sed. Curabitur maximus pellentesque tincidunt. Nulla nunc dolor, sagittis a metus at, hendrerit elementum leo. Aliquam congue nibh diam, nec ornare odio
        feugiat ac. Maecenas mollis dui ac libero consectetur, vel hendrerit felis hendrerit. Aenean felis sapien, condimentum non ante at, luctus suscipit augue. Aenean faucibus ullamcorper urna, a tempor augue ultrices ut. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi suscipit sem dignissim bibendum. Etiam a vehicula nisl. Maecenas dignissim, urna non facilisis hendrerit, metus urna interdum tellus, quis rutrum justo mauris vitae
        massa. Nunc eu ultrices sapien. Morbi ultrices gravida maximus. Sed sit amet lectus leo. Donec vulputate arcu vitae orci facilisis elementum a a lorem. In accumsan, erat ac commodo molestie, ligula tellus consectetur odio, non congue ante urna
        eu erat. Morbi nec iaculis mauris. Vivamus suscipit rhoncus metus, eu rhoncus ipsum bibendum sed. Curabitur maximus pellentesque tincidunt. Nulla nunc dolor, sagittis a metus at, hendrerit elementum leo. Aliquam congue nibh diam, nec ornare odio
        feugiat ac. Maecenas mollis dui ac libero consectetur, vel hendrerit felis hendrerit. Aenean felis sapien, condimentum non ante at, luctus suscipit augue. Aenean faucibus ullamcorper urna, a tempor augue ultrices ut. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi suscipit sem dignissim bibendum. Etiam a vehicula nisl. Maecenas dignissim, urna non facilisis hendrerit, metus urna interdum tellus, quis rutrum justo mauris vitae
        massa. Nunc eu ultrices sapien. Morbi ultrices gravida maximus. Sed sit amet lectus leo. Donec vulputate arcu vitae orci facilisis elementum a a lorem. In accumsan, erat ac commodo molestie, ligula tellus consectetur odio, non congue ante urna
        eu erat. Morbi nec iaculis mauris. Vivamus suscipit rhoncus metus, eu rhoncus ipsum bibendum sed. Curabitur maximus pellentesque tincidunt. Nulla nunc dolor, sagittis a metus at, hendrerit elementum leo. Aliquam congue nibh diam, nec ornare odio
        feugiat ac. Maecenas mollis dui ac libero consectetur, vel hendrerit felis hendrerit. Aenean felis sapien, condimentum non ante at, luctus suscipit augue. Aenean faucibus ullamcorper urna, a tempor augue ultrices ut. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi suscipit sem dignissim bibendum. Etiam a vehicula nisl. Maecenas dignissim, urna non facilisis hendrerit, metus urna interdum tellus, quis rutrum justo mauris vitae
        massa. Nunc eu ultrices sapien. Morbi ultrices gravida maximus. Sed sit amet lectus leo. Donec vulputate arcu vitae orci facilisis elementum a a lorem. In accumsan, erat ac commodo molestie, ligula tellus consectetur odio, non congue ante urna
        eu erat. Morbi nec iaculis mauris. Vivamus suscipit rhoncus metus, eu rhoncus ipsum bibendum sed. Curabitur maximus pellentesque tincidunt. Nulla nunc dolor, sagittis a metus at, hendrerit elementum leo. Aliquam congue nibh diam, nec ornare odio
        feugiat ac. Maecenas mollis dui ac libero consectetur, vel hendrerit felis hendrerit. Aenean felis sapien, condimentum non ante at, luctus suscipit augue. Aenean faucibus ullamcorper urna, a tempor augue ultrices ut. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi suscipit sem dignissim bibendum. Etiam a vehicula nisl. Maecenas dignissim, urna non facilisis hendrerit, metus urna interdum tellus, quis rutrum justo mauris vitae
        massa. Nunc eu ultrices sapien. Morbi ultrices gravida maximus. Sed sit amet lectus leo. Donec vulputate arcu vitae orci facilisis elementum a a lorem. In accumsan, erat ac commodo molestie, ligula tellus consectetur odio, non congue ante urna
        eu erat. Morbi nec iaculis mauris. Vivamus suscipit rhoncus metus, eu rhoncus ipsum bibendum sed. Curabitur maximus pellentesque tincidunt. Nulla nunc dolor, sagittis a metus at, hendrerit elementum leo. Aliquam congue nibh diam, nec ornare odio
        feugiat ac. Maecenas mollis dui ac libero consectetur, vel hendrerit felis hendrerit. Aenean felis sapien, condimentum non ante at, luctus suscipit augue. Aenean faucibus ullamcorper urna, a tempor augue ultrices ut. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi suscipit sem dignissim bibendum. Etiam a vehicula nisl. Maecenas dignissim, urna non facilisis hendrerit, metus urna interdum tellus, quis rutrum justo mauris vitae
        massa. Nunc eu ultrices sapien. Morbi ultrices gravida maximus. Sed sit amet lectus leo. Donec vulputate arcu vitae orci facilisis elementum a a lorem. In accumsan, erat ac commodo molestie, ligula tellus consectetur odio, non congue ante urna
        eu erat. Morbi nec iaculis mauris. Vivamus suscipit rhoncus metus, eu rhoncus ipsum bibendum sed. Curabitur maximus pellentesque tincidunt. Nulla nunc dolor, sagittis a metus at, hendrerit elementum leo. Aliquam congue nibh diam, nec ornare odio
        feugiat ac. Maecenas mollis dui ac libero consectetur, vel hendrerit felis hendrerit. Aenean felis sapien, condimentum non ante at, luctus suscipit augue. Aenean faucibus ullamcorper urna, a tempor augue ultrices ut. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi suscipit sem dignissim bibendum. Etiam a vehicula nisl. Maecenas dignissim, urna non facilisis hendrerit, metus urna interdum tellus, quis rutrum justo mauris vitae
        massa. Nunc eu ultrices sapien. Morbi ultrices gravida maximus. Sed sit amet lectus leo. Donec vulputate arcu vitae orci facilisis elementum a a lorem. In accumsan, erat ac commodo molestie, ligula tellus consectetur odio, non congue ante urna
        eu erat. Morbi nec iaculis mauris. Vivamus suscipit rhoncus metus, eu rhoncus ipsum bibendum sed. Curabitur maximus pellentesque tincidunt. Nulla nunc dolor, sagittis a metus at, hendrerit elementum leo. Aliquam congue nibh diam, nec ornare odio
        feugiat ac. Maecenas mollis dui ac libero consectetur, vel hendrerit felis hendrerit. Aenean felis sapien, condimentum non ante at, luctus suscipit augue. Aenean faucibus ullamcorper urna, a tempor augue ultrices ut. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tincidunt nisi suscipit sem dignissim bibendum. Etiam a vehicula nisl. Maecenas dignissim, urna non facilisis hendrerit, metus urna interdum tellus, quis rutrum justo mauris vitae
        massa. Nunc eu ultrices sapien. Morbi ultrices gravida maximus. Sed sit amet lectus leo. Donec vulputate arcu vitae orci facilisis elementum a a lorem. In accumsan, erat ac commodo molestie, ligula tellus consectetur odio, non congue ante urna
        eu erat. Morbi nec iaculis mauris. Vivamus suscipit rhoncus metus, eu rhoncus ipsum bibendum sed. Curabitur maximus pellentesque tincidunt. Nulla nunc dolor, sagittis a metus at, hendrerit elementum leo. Aliquam congue nibh diam, nec ornare odio
        feugiat ac. Maecenas mollis dui ac libero consectetur, vel hendrerit felis hendrerit. Aenean felis sapien, condimentum non ante at, luctus suscipit augue. Aenean faucibus ullamcorper urna, a tempor augue ultrices ut. </p>
    </div>

  </div>

</body>

</html>
Katie
  • 321
  • 2
  • 7
  • I really liked this imperfect solution, the only problem I have with it, is that certain elements don't react to the scrollbar. This can be easily solved using JavaScript though. Inspired by your solution, I tried a different approach and I think I solved it using lots of fixed elements and clip-path's. I'll need to clean my code a bit, but after that's done i'll add it as an aswer. – CvP May 18 '21 at 17:21
0

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      html,
      body {
        /* height: 100%; */
        margin: 0;
      }

      body {
        background-color: white;
      }

      #container {
       width:100%;
       height:100vh;

      }

      #ticket {
        position: fixed;
        top: 0;
        left: 0;
        padding: 5px;
        height: 100%;
        width: 100%;
        filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));
      
      }

      #topPart {
        clip-path: polygon(
          0% 0%,
          100% 0%,
          100% 67px,
          calc(100% - 25px) 77px,
          25px 77px,
          0% 67px
        );
        background-color: tomato;
        height: 75px;
        width: 100%;
        border-bottom: 2px dashed white;
      }

      #bottomPart {
overflow-y: auto;
        background-color: tomato;
        clip-path: polygon(
          25px -2px,
          calc(100% - 25px) -2px,
          100% 8px,
          100% 100%,
          0% 100%,
          0% 8px
        );
        height: calc(100% - 75px - 5px);
        border-top: 2px dashed white;
        padding: 5px;
      }

   
    </style>
  </head>
  <body>
    <div id="container">
      <div id="ticket">
        <div id="topPart"></div>
        <div id="bottomPart">
          <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper ligula in metus faucibus varius. Vivamus dignissim justo sit amet nibh varius, vel eleifend dolor finibus. Sed vestibulum dui sit amet laoreet mollis. Duis at aliquam nibh. Nullam nec volutpat orci. Vivamus vel leo eros. Nam commodo condimentum laoreet. Vivamus vulputate et mauris a bibendum. Sed bibendum mi vel massa tempor porttitor. Cras sed lectus ac lorem imperdiet suscipit ut sed dolor. Fusce convallis dolor sit amet risus vestibulum, a dictum orci bibendum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper ligula in metus faucibus varius. Vivamus dignissim justo sit amet nibh varius, vel eleifend dolor finibus. Sed vestibulum dui sit amet laoreet mollis. Duis at aliquam nibh. Nullam nec volutpat orci. Vivamus vel leo eros. Nam commodo condimentum laoreet. Vivamus vulputate et mauris a bibendum. Sed bibendum mi vel massa tempor porttitor. Cras sed lectus ac lorem imperdiet suscipit ut sed dolor. Fusce convallis dolor sit amet risus vestibulum, a dictum orci bibendum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper ligula in metus faucibus varius. Vivamus dignissim justo sit amet nibh varius, vel eleifend dolor finibus. Sed vestibulum dui sit amet laoreet mollis. Duis at aliquam nibh. Nullam nec volutpat orci. Vivamus vel leo eros. Nam commodo condimentum laoreet. Vivamus vulputate et mauris a bibendum. Sed bibendum mi vel massa tempor porttitor. Cras sed lectus ac lorem imperdiet suscipit ut sed dolor. Fusce convallis dolor sit amet risus vestibulum, a dictum orci bibendum.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper ligula in metus faucibus varius. Vivamus dignissim justo sit amet nibh varius, vel eleifend dolor finibus. Sed vestibulum dui sit amet laoreet mollis. Duis at aliquam nibh. Nullam nec volutpat orci. Vivamus vel leo eros. Nam commodo condimentum laoreet. Vivamus vulputate et mauris a bibendum. Sed bibendum mi vel massa tempor porttitor. Cras sed lectus ac lorem imperdiet suscipit ut sed dolor. Fusce convallis dolor sit amet risus vestibulum, a dictum orci bibendum.</div>
        </div>
      </div>
    </div>
  </body>
</html>
Django
  • 160
  • 2
  • 13
  • This doesn't support overflowing content in the bottomPart of the ticket though? Or am I missing something? – CvP May 16 '21 at 18:07
  • don't use vh for sizing ->#content {height: 300vh;} – Django May 16 '21 at 18:07
  • I reorganized the code, can you check it again? – Django May 16 '21 at 18:14
  • I understand not using vh for sizing, but I just did that to show the problem. And I checked the edited code, but as you can see the scroll bar is now on the bottomPart of the ticket instead of the ticket itself. – CvP May 16 '21 at 18:17
0

Inspired by the answer of Katie, I tried playing around with lots of fixed elements and clip-paths. After a couple of failed attempts I found a workable solution:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* Usefull links:
       https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
       https://stackoverflow.com/questions/34570944/css-stretch-content-container-height-if-empty-overflow-if-too-big
       https://stackoverflow.com/questions/58283119/create-a-transparent-window-in-a-div-background-with-css-and-javascript
      */
      html {
        box-sizing: border-box;
      }
      *,
      *:before,
      *:after {
        box-sizing: inherit;
      }

      html,
      body {
        /* height: 100%; */
        margin: 0;
      }

      body {
        background-color: white;
      }

      #BottomContent {
        margin: 10px;
        margin-top: 83px;
        width: calc(100% - 10px - 10px);
        background-color: purple;
      }

      #fixedTicket {
        width: 100%;
        height: 100%;
      }

      #background {
        position: fixed;
        top: 0;
        bottom: 0;
        background-color: white;
        clip-path: polygon(
          0% 0%,
          0% 100%,
          5px 100%,
          5px calc(100% - 5px),
          /* Linker inham begin*/ 5px 87px,
          25px 77px,
          5px 67px /* Linker inham eind */,
          5px 5px,
          calc(100% - 5px) 5px,
          /* Rechter inham begin */ calc(100% - 5px) 67px,
          calc(100% - 25px) 77px,
          calc(100% - 5px) 87px /* Rechter inham eind */,
          calc(100% - 5px) calc(100% - 5px),
          5px calc(100% - 5px),
          5px 100%,
          100% 100%,
          100% 0%
        );
        width: 100%;
        height: 100%;
      }

      /* TOP */
      #bottomTop {
        background-color: tomato;
        clip-path: polygon(
          5px 67px,
          24px 77px,
          calc(100% - 24px) 77px,
          calc(100% - 5px) 67px,
          calc(100% - 5px - 5px) 64px,
          calc(100% - 23px) 70px,
          23px 70px,
          10px 64px
        );
        width: 100%;
        height: 77px;
        position: fixed;
        top: 0px;
        left: 0px;
        border-bottom: 2px dashed white;
      }

      #leftTop {
        left: 5px;
        top: 5px;
        background-color: tomato;
        position: fixed;
        width: 5px;
        height: 62px;
      }

      #rightTop {
        right: 5px;
        top: 5px;
        background-color: tomato;
        position: fixed;
        width: 5px;
        height: 62px;
      }

      #topTop {
        top: 5px;
        left: 5px;
        background-color: tomato;
        position: fixed;
        height: 5px;
        width: calc(100% - 5px - 5px);
      }

      /* Top CONTENT */
      #topContent {
        background-color: tomato;
        position: fixed;
        left: 10px;
        top: 10px;
        width: calc(100% - 10px - 10px);
        height: 62px;
        clip-path: polygon(
          0 0,
          100% 0,
          100% 55px,
          calc(100% - 12px) 61px,
          12px 61px,
          0 55px
        );
      }

      /* BOTTOM */
      #topBottom {
        background-color: tomato;
        clip-path: polygon(
          5px 10px,
          24px 0px,
          calc(100% - 24px) 0px,
          calc(100% - 5px) 10px,
          calc(100% - 5px - 5px) 12px,
          calc(100% - 22px) 6px,
          22px 6px,
          10px 12px
        );
        width: 100%;
        height: 13px;
        position: fixed;
        top: 77px;
        left: 0px;
        border-top: 2px dashed white;
      }

      #leftBottom {
        background-color: tomato;
        position: fixed;
        left: 5px;
        bottom: 5px;
        height: calc(100% - 77px - 10px - 5px);
        width: 5px;
        box-shadow: -3px 2px 3px rgba(0, 0, 0, 0.2);
      }

      #rightBottom {
        background-color: tomato;
        position: fixed;
        right: 5px;
        bottom: 5px;
        height: calc(100% - 77px - 10px - 5px);
        width: 5px;
        box-shadow: 3px 2px 2px rgba(50, 50, 0, 0.2);
      }

      #bottomBottom {
        background-color: tomato;
        position: fixed;
        left: 5px;
        bottom: 5px;
        height: 5px;
        width: calc(100% - 5px - 5px);
        box-shadow: 0px 3px 3px rgba(50, 50, 0, 0.2);
      }
    </style>
  </head>
  <body>
    <div id="ticket">
      <div id="bottomContent">
        <div style="height: 100vh; background-color: purple"></div>
        <div style="height: 100vh; background-color: orange"></div>
        <div style="height: 100vh; background-color: tomato"></div>
      </div>

      <div id="fixedTicket">
        <!-- White background -->
        <div id="background"></div>

        <!-- Actual ticket shapes -->

        <div id="top">
          <div id="topTop"></div>
          <div id="bottomTop"></div>
          <div id="leftTop"></div>
          <div id="rightTop"></div>
        </div>

        <div id="topContent"></div>

        <div id="bottom">
          <div id="topBottom"></div>
          <div id="leftBottom"></div>
          <div id="rightBottom"></div>
          <div id="bottomBottom"></div>
        </div>
      </div>
    </div>
  </body>
</html>

This solution can be simplified even more by using larger clip-paths, but I decided for more separate fixed elements, since it's easier to control shadows that way (which I will need later on).

If you want to go the clip-path way, make sure to take a look at this:

Create a transparent window in a div background with css and javascript

CvP
  • 324
  • 1
  • 4
  • 17