How to create a drawing in open book format and with content inside?

Question

I need a drawing of an open book with contents inside, as the image below:

ONLY WITH CSS!

Answer 1

Open the image in Photoshop by selecting the text area, with the selection tool, click with the dropper in the white area of the paper where the text is, with the selected color paint it white with the alt + delete command, then with the slice tool, cut this image into three parts, as in the example below:

Now create the box and css as below:

 <style>
#livro {
   width: 868px;
   min-height: 550px;
   background: #fff4d6;
}
#livro .content {
 width: 868px;
 height: auto;
 background: url(imagens/content.jpg) center center repeat-y;
}
#livro .content p {
   color: #00777f;
   font-family: Arial, Verdana;
   font-size: 14px;
   padding: 20px 10px;
}
#livro .top {
 width: 868px;
 height: 49px;
 background: url(imagens/top.jpg) center top no-repeat;
 display:block;
}

#livro .bottom {
 width: 868px;
 height: 75px;
 background: url(imagens/bottom.jpg) center top no-repeat;
 display:block;
}
</style>

<div id="livro">
  <div class="top"></div>
   <div class="content"> <p>
Lorem ipsum dolor sit amet, possim 
ullamcorper pro ea, error possim 
deterruisset vim te. In quo suas signiferumque, no sea debitis facilisi. Id doming ponderum interpretaris vim, 
ius an elitr adipiscing dissentias. Eu est agam concludaturque. Ut mea omnis clita scriptorem, nihil accumsan 
moderatius in mel. Te has offendit detraxit maiestatis, vel ut vide insolens accusamus. </p>
 <p>
Quo ei equidem nostrum, ad vis case assentior 
definitionem. Pro quod appareat ut, ei pro malis percipit instructior, vis ne nostrum posidonium. Ad vis harum latine, 
pro nullam rationibus ut, veri noluisse 
dissentias eum at. Pri in numquam dolores, at pro vocent praesent posidonium.
 </p>
 <p>
Ad duo libris platonem, mea ex accusam 
consequuntur. Aperiam evertitur duo at. Hendrerit mnesarchum ex his. Vix congue veniam at, ad veri postea incorrupte vix. Mei ex qualisque percipitur cotidieque.
 </p>
 <p>
Ex facilis accusam usu, ponderum 
intellegat an sit. Te pri persius 
efficiendi concludaturque. Liber 
salutatus adversarium ea vis. His ea quot ridens perfecto. Eum id vidit quando.
 </p>
 <p>
In sea iusto honestatis. Clita sensibus 
cum no, percipit recteque scriptorem vis 
cu. Erant graeci ne vel, omnis aperiam 
ne mei. At his eirmod cetero. </p>
</div>
  <div class="bottom"></div>
</div>

Obs: If you want to use CSS only, use SVG, canvas or convert images to Base64, here’s a site that does it for you: http://www.base64-image.de/step-1.php

Answer 2

Do a div with the css background-image: then set the padding so that the text does not exceed the page limits, if the book’s "edge" has about 10 pixels, use a 20 of padding. Then place the contents of the desired div. Don’t forget to leave the size of the image equal to that of the div

Ex:

<div style="background-image:url('livro.gif');padding-left:20px;padding-right:20px">Aqui vai o texto do livro</div>