HTML
14
1
<div class="container">2
<div class="element">3
4
</div>5
<p>6
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, earum, cum cumque ullam tempora quos expedita officiis consectetur! Tenetur aliquam error doloribus praesentium facilis delectus autem temporibus iusto ad dignissimos. Tenetur aliquam error doloribus praesentium facilis delectus autem temporibus iusto ad dignissimos7
</p>8
<p>9
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, eligendi, veritatis, libero distinctio tenetur nesciunt earum provident corrupti sint debitis soluta sit animi blanditiis eum vel nam cupiditate fuga corporis! Tenetur aliquam error doloribus praesentium facilis delectus autem temporibus iusto ad dignissimos?10
</p>11
<p>12
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, earum, cum cumque ullam tempora quos expedita officiis consectetur!13
</p>14
</div>CSS
35
1
body {2
background-color: #F5F5F5;3
color: #555;4
font-size: 1.1em;5
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;6
}7
8
hr {9
margin: 50px 0;10
}11
12
.container {13
margin: 50px auto;14
max-width: 800px;15
padding: 25px;16
background-color: white;17
overflow: hidden;18
color: #333;19
text-align: justify;20
}21
22
.element {23
width: 100%;24
height: 600px;25
float: right;26
background-image: url(bear.jpg);27
background-size: 100% 100%;28
shape-outside: polygon(nonzero, 23% 90%, 23.75% 84%, 27.75% 78.5%, 33.75% 75.15%, 42.75% 75.65%, 46.25% 69.5%, 51.75% 68.15%, 52.75% 61.65%, 55.75% 54.15%, 42.5% 38%, 43% 29.15%, 46.25% 24.5%, 51.25% 23.65%, 53.75% 13.15%, 59.25% 5.65%, 68% 1%, 99.75% 0.65%, 100% 100%, 24% 100%) border-box;29
shape-outside: polygon(nonzero, 23% 90%, 23.75% 84%, 27.75% 78.5%, 33.75% 75.15%, 42.75% 75.65%, 46.25% 69.5%, 51.75% 68.15%, 52.75% 61.65%, 55.75% 54.15%, 42.5% 38%, 43% 29.15%, 46.25% 24.5%, 51.25% 23.65%, 53.75% 13.15%, 59.25% 5.65%, 68% 1%, 99.75% 0.65%, 100% 100%, 24% 100%) border-box;30
}31
32
p {33
background-color: rgba(255, 255, 255, 0.3);34
}35
JS
1
1