```metadata
title: 'Example: Float and Shape Outside'
description: undefined
tags: ''
systems: []
renderer: V3
theme: 5ePHB

```

```css
  .page img {
  	width: 50%;
  	float: left;
  	margin-right : 5px;
  	mix-blend-mode: darken;
  }
  
  .page#p2, .page#p3 {
  	columns:1;
  }
  
  .page ul li::marker {
    text-indent: unset !important;
  }
```

# A Simple Example

<img src='https://i.imgur.com/T4vmLr6.jpeg' />

This image looks to be promotional art for the Shadowrun RPG.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus libero non nibh cursus sollicitudin. Etiam neque nisl, tristique placerat cursus vitae, sagittis non eros. Quisque volutpat accumsan lectus sit amet dignissim. Vestibulum sed ultrices nisl, sit amet scelerisque odio. Cras in tortor ut risus accumsan elementum. Praesent congue, sapien eu malesuada semper, felis quam aliquam orci, sit amet efficitur neque turpis vel felis. Donec cursus lacus vitae erat venenatis congue. Phasellus ac nisl vitae justo consectetur iaculis vitae sit amet odio. Suspendisse vehicula ligula sed imperdiet suscipit. Proin mollis mi nec orci mattis varius.

Proin vitae dolor at erat bibendum molestie eget a eros. Pellentesque elementum finibus dictum. Donec eu nibh nunc. Nam vitae lobortis nisi. Curabitur vestibulum auctor lectus, at molestie nulla volutpat quis. Aliquam erat volutpat. Sed iaculis, lacus vel pretium convallis, elit neque consequat risus, sit amet imperdiet dui sem placerat odio. Nullam blandit sapien et urna interdum euismod. In et risus tempus, vestibulum elit non, suscipit urna. Donec finibus at eros a aliquet. Vivamus tincidunt eros sit amet malesuada lobortis.

\page

# A More Complex Example - Clip-Path

<img src='https://i.imgur.com/7tGSH1V.jpeg' style='height:400px; width: auto; shape-outside: polygon(0 0, 85% 0, 95% 50%, 90% 65%, 92% 80%, 77% 80%, 65% 100%, 0 100%);' />

{{position:absolute,font-style:italic,text-align:center,top:455px;left:75px,width:225px,font-size:11px
I'm a tiny caption!  
Art by [Kii Weatherton](https://i.imgur.com/7tGSH1V.jpeg); found on Imgur.
}}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras cursus libero non nibh cursus sollicitudin. Etiam neque nisl, tristique placerat cursus vitae, sagittis non eros. 

Quisque volutpat accumsan lectus sit amet dignissim. Vestibulum sed ultrices nisl, sit amet scelerisque odio.
* Cras in tortor ut risus accumsan elementum. Praesent congue, sapien eu malesuada semper, felis quam aliquam orci, sit amet efficitur neque turpis vel felis. Donec cursus lacus vitae erat venenatis congue.

Phasellus ac nisl vitae justo consectetur iaculis vitae sit amet odio. Suspendisse vehicula ligula sed imperdiet suscipit. Proin mollis mi nec orci mattis varius.

Proin vitae dolor at erat bibendum molestie eget a eros. Pellentesque elementum finibus dictum. Donec eu nibh nunc. Nam vitae lobortis nisi. Curabitur vestibulum auctor lectus, at molestie nulla volutpat quis. Aliquam erat volutpat. Sed iaculis, lacus vel pretium convallis, elit neque consequat risus, sit amet imperdiet dui sem placerat odio. Nullam blandit sapien et urna interdum euismod. In et risus tempus, vestibulum elit non, suscipit urna. Donec finibus at eros a aliquet. Vivamus tincidunt eros sit amet malesuada lobortis.

Donec imperdiet nunc luctus nisl sodales cursus. Fusce eu tempus tellus, vel bibendum diam. Curabitur condimentum vel metus eu placerat. Suspendisse vel imperdiet felis, vel porta nibh. Nunc finibus mauris eu iaculis convallis. Proin non nisl sem. Integer eros sem, condimentum ut ipsum eget, dapibus faucibus metus. Vestibulum ligula dolor, placerat eget felis non, maximus lobortis sem. Morbi maximus metus id bibendum lobortis. Proin nec faucibus dui. Aenean ex nibh, iaculis vel dictum eget, facilisis ut justo. Vestibulum finibus tortor eget sem egestas vestibulum. Nulla cursus dui lobortis lectus eleifend tempus. Nulla eget nibh ultricies, eleifend diam vel, tempus nibh.


\page


![](https://i.imgur.com/zsLH4vU.png){height:400px,width:auto;shape-outside:url(https://i.imgur.com/zsLH4vU.png),shape-image-threshold:0.05,shape-margin:8px}

Vestibulum at mattis turpis. Vestibulum sagittis volutpat tempor. Sed mi risus, laoreet sed neque non, rutrum sagittis tellus. Sed a risus in orci fermentum luctus ac nec libero. Donec nunc sem, imperdiet non eros sollicitudin, gravida condimentum dolor. Donec volutpat ante non erat eleifend imperdiet. Cras vehicula tempus nunc quis placerat. Pellentesque et lorem ornare, accumsan quam vel, tristique nulla. Duis vestibulum ligula ut nisi sollicitudin, sed convallis purus varius. Etiam eget neque eleifend, volutpat quam sit amet, imperdiet quam. Aenean ac sem justo.

Aliquam lectus odio, congue vel velit eget, tincidunt malesuada mi. Proin id metus id quam aliquam varius nec ut nibh. Fusce imperdiet sapien purus, id semper diam lobortis at. Maecenas ut est tristique lorem blandit mollis. Donec vestibulum, diam non fermentum congue, orci dolor mattis lacus, vel pulvinar diam libero sed quam. Vivamus quam nulla, fringilla at est non, imperdiet hendrerit enim. Sed malesuada dictum mauris, a auctor ipsum interdum pharetra. Suspendisse fringilla vestibulum sapien, a bibendum justo condimentum id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce nisl urna, tincidunt vel varius eget, porttitor eget felis. Mauris ullamcorper elit eget efficitur ultrices.

Nam massa purus, mattis vel iaculis ut, egestas eget ante. Vestibulum vitae eros aliquam ante condimentum mollis. Quisque nec lorem ut felis hendrerit lacinia vel non nibh. Fusce pretium lacus ac mauris tempor, non maximus eros congue. Integer ac hendrerit diam. Vivamus imperdiet ut nunc finibus gravida. In ut mi a ligula lobortis dictum. Donec a urna dolor. Suspendisse quis purus nec purus condimentum mollis eget a nunc. Sed in odio neque. Nullam in mauris sed massa interdum dignissim. Duis consequat est eu accumsan tristique. In facilisis justo fringilla, gravida diam id, pretium justo. Pellentesque hendrerit in nulla a ornare. Cras egestas quam vulputate turpis vulputate, nec malesuada quam congue.