<div class="page">

  <div class="box">

    <div class="boxContent">

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis corporis quidem esse omnis a eveniet repellat illo, autem beatae, quia officiis, consequuntur officia commodi nobis magni minus quos fugiat amet.</p>

    </div>

  </div>

</div>

​

@import url('https://fonts.cdnfonts.com/css/handwriting');

* { box-sizing: border-box}

​

:root {

  --yellow: #FDF7D5;

  --lines: #EBDEC4;

}

​

html { height: 100%; }

body {

  font-family: "Handwriting", cursive;

  font-weight: bold;

  background: linear-gradient(-45deg, #140521, #5E0FA3);

  height: 100vh;

}

​

.page {

  display: flex;

  width: 100%;

  height: 100%;

  align-items: center;

  justify-content: center;

}

​

.box {

  display: flex;

  width: 60vw;

  min-height: 60vh;

  margin: auto;

  padding: 0;

  padding-top: calc(var(--size)/2);

  --size: 20px;

   background: 

     radial-gradient(

       calc(var(--size)/2) at top, 

       transparent 90%, 

       var(--yellow) 100%

     );

   background-position: 0 0;

   background-repeat: repeat-x;

   background-size: calc(var(--size)*1.5) calc(var(--size)/2);

  filter: drop-shadow(0px 10px 10px rgba(0,0,0,0.2));

}

​

.boxContent {

  display: flex;

  width: 100%;

  min-height: 100%;

  background: var(--yellow);

  padding: 2.5rem 1rem 1rem;

}

​

p {

  display: block;

  width: 100%;

  font-size: 4vmin;

  line-height: 1.8em;

  background-image: linear-gradient(to bottom, transparent 96%, var(--lines) 100%, var(--lines) 96%, transparent 100%);

  background-size: 100% 1.8em;

  background-repeat: repeat-y;

  padding: 0 1rem;

  text-wrap: pretty;

}