css-shapes-layouts3

by kazu69

HTML

<div class="container">
        <div class="content">
            <h2>Blueberry Cheesecake</h2>
            <p>Cupcake ipsum dolor sit amet jelly beans sesame snaps chocolate bar. Cookie candy topping liquorice jelly beans. Candy canes halvah chupa chups. Lollipop sesame snaps jujubes brownie tootsie roll. Dragée cake sweet. Danish jelly beans sweet carrot cake. Unerdwear.com marzipan dessert I love. Donut sugar plum biscuit I love gingerbread cheesecake donut. Chupa chups candy canes lollipop soufflé chupa chups jelly beans I love biscuit sugar plum. Chocolate cake marzipan I love topping jelly beans biscuit gummi bears. Dragée cupcake dessert tart chocolate cake. Powder I love macaroon. Apple pie I love bear claw chocolate cake.
            Bear claw cookie muffin jelly-o gummies jujubes pie. Halvah chocolate cake pudding chocolate cake biscuit. I love jujubes soufflé. Chupa chups candy gingerbread. Candy jujubes fruitcake jelly-o danish. Dessert biscuit I love dessert.</p> 
        </div>
    </div>
    </div>

CSS

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  position:relative;
}
html, body{
  min-height:100%;
  background-color: lightgray;
} 

.container{
  width:445px;
  height:670px;
  overflow:hidden;
  font-family: 'Nunito', sans-serif;
  margin:30px auto;
  background: url(https://raw.github.com/SaraSoueidan/css-shapes-layouts/master/demo-3/images/cheesecake.jpg) top left no-repeat;
  background-size: 100% 100%;
  shape-inside: polygon(28.67px 622.00px,407.50px 621.24px,407.92px 468.85px,331.63px 479.16px,269.48px 472.32px,195.41px 453.89px,143.37px 412.68px,137.33px 315.47px,166.00px 296.47px,198.67px 277.47px,236.63px 227.16px,291.58px 202.85px,349.50px 220.24px,410.33px 231.00px,411.67px 29.53px,31.33px 27.53px);
  /*shape-inside: url(mask.png) top left;*/
}

.content{
  padding:0 30px 30px;
  color:white;
  font-size:14px;
}
.content h2{
  font-family: 'Qwigley', cursive;
  font-size:56px;
  line-height:1;
  margin: .6em 0 .8em;
}