<div class="l-wrapper">
  <div class="text">
    <h1>Dragons And Knights</h1>
    <img src="https://img-fotki.yandex.ru/get/6840/5091629.a1/0_855a9_b872dbe5_M" alt="" class="pic pic--dragon"/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum. </p>
    <img src="https://img-fotki.yandex.ru/get/6821/5091629.a1/0_855aa_7b6c51aa_M" alt="" class="pic pic--knight"/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lacus luctus, vestibulum ante in, facilisis mi. Pellentesque vehicula at nulla ac fermentum. </p>
    <p>Phasellus nec sodales urna. Morbi in maximus magna. Nunc tincidunt justo augue, vel mattis risus condimentum sed. Proin sodales eget urna ut tempus. In bibendum justo vitae efficitur cursus. </p>
    <p>In hac habitasse platea dictumst. Etiam et tortor pulvinar dui eleifend egestas. Nullam venenatis risus massa, at faucibus risus ullamcorper id. Vestibulum consequat lectus vitae justo ultrices, nec sodales ante egestas. </p>
    <img src="https://img-fotki.yandex.ru/get/6806/5091629.a1/0_855ab_45e96a50_XS" alt="" class="pic pic--stone"/>
   </div>
</div>
BODY {
  font: 1em/1.4 Georgia, serif;
  background:
    url(https://img-fotki.yandex.ru/get/6846/5091629.a1/0_8558d_406830d_M);
  background-position: 50% 50%;
}
H1 {
  overflow: hidden; 
  margin: 0 0 3rem;
  text-align: center;
  font-size: 2.6em;
  text-shadow: 2px 2px 0 hsl(0,100%,100%),
    3px 3px 0;
  font-style: italic;
  &:before,
  &:after {
    content: '';
    padding-left: 50%;
    vertical-align: middle;
    background: linear-gradient(
      black 2px, 
      transparent 2px, transparent 4px,
      black 4px, black 5px 
    );
    background-position: 0 50%;
    background-size: 100% 5px;
    background-repeat: no-repeat;
    }
  &:before {
    margin-left: -55%;
    margin-right: 1.5%;
    }
  &:after {
    margin-left: 1.7%;
    margin-right: -55%;
    }
  }

P {
  margin: 0 0 1rem;
  }

.l-wrapper {
  width: 540px;
  margin: 2em auto;
  mix-blend-mode: multiply;

  &:after {
    content: '';
    display: table;
    width: 100%;
    clear: both;
    }
  }
.pic--dragon {
  float: left;
  margin: 0 2em 2em -3em;
  -webkit-shape-outside: polygon(0 0, 53% 0, 61% 13%, 96% 13%, 94% 36%, 81% 52%, 87% 87%, 0 87%);
  shape-outside: polygon(0 0, 53% 0, 61% 13%, 96% 13%, 94% 36%, 81% 52%, 87% 87%, 0 87%);
  }
.pic--knight {
  float: right;
  margin: 0 -3em 2em 2em;
  -webkit-shape-outside: polygon(25% 0, 100% 0, 100% 100%, 21% 100%, 29% 65%, 3% 25%, 32% 16%);
  shape-outside: polygon(25% 0, 100% 0, 100% 100%, 21% 100%, 29% 65%, 3% 25%, 32% 16%);
  }
.pic--stone {
  display: block;
  margin: 2em auto 0;
  }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.