<div>
  <img class="shape shape-left" src="https://assets.codepen.io/32795/bees.png" />
  <img class="shape shape-right" src="https://assets.codepen.io/32795/bees.png" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar dolor a nulla convallis luctus. Mauris pellentesque sit amet purus non vulputate. Duis non nulla nec dui aliquet pharetra at quis turpis. Phasellus vestibulum nisl diam. Aliquam vitae dui quis nunc elementum vestibulum. Cras lobortis est id purus suscipit dictum. Suspendisse faucibus fermentum ligula, in luctus enim imperdiet ultricies. Maecenas ac eros in nisi egestas pulvinar. Cras eget luctus leo, eget euismod magna. Praesent ligula odio, pellentesque eu dapibus et, tristique id lacus. Pellentesque sit amet orci urna. Mauris tempor nulla quam, sit amet pulvinar velit malesuada eu. Aliquam erat volutpat. Sed vulputate quam id diam venenatis rutrum.Maecenas dapibus dolor et lacus auctor, id vestibulum felis imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus pretium condimentum cursus. Nullam porttitor nisi at orci hendrerit, vel rutrum turpis blandit. Suspendisse dictum augue risus, at accumsan justo varius sit amet. Vivamus eros urna, posuere id ornare nec, tincidunt eu nibh. Morbi molestie ipsum nec elit egestas iaculis. In viverra orci ac porta euismod. Vestibulum sed ultrices velit, quis fringilla nibh. Proin suscipit tincidunt mauris, nec venenatis dolor. Sed ultrices rhoncus velit, in molestie risus consectetur nec. In hac habitasse platea dictumst. Proin nec mattis est. Pellentesque tempor felis nec tempor convallis.Curabitur et fermentum neque. Praesent hendrerit aliquam nunc sed aliquet. Phasellus a erat accumsan purus pretium dapibus. Duis gravida gravida dapibus. Phasellus sodales nisl sed sapien congue tempor. Vestibulum consectetur sagittis cursus. Nunc congue rhoncus tempor. Donec vestibulum nibh ut gravida placerat. Fusce sodales molestie orci non malesuada. Duis quam augue, scelerisque et justo quis, posuere rutrum nibh. Pellentesque ut sapien mattis, scelerisque neque et, ultricies leo. Suspendisse molestie est mauris, sed pharetra erat luctus vel. Vivamus faucibus placerat augue sed dictum. Nam erat ante, gravida ut purus vel, ornare pellentesque risus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar dolor a nulla convallis luctus. Mauris pellentesque sit amet purus non vulputate. Duis non nulla nec dui aliquet pharetra at quis turpis. Phasellus vestibulum nisl diam. Aliquam vitae dui quis nunc elementum vestibulum. Cras lobortis est id purus suscipit dictum. Suspendisse faucibus fermentum ligula, in luctus enim imperdiet ultricies. Maecenas ac eros in nisi egestas pulvinar. Cras eget luctus leo, eget euismod magna. Praesent ligula odio, pellentesque eu dapibus et, tristique id lacus. Pellentesque sit amet orci urna. Mauris tempor nulla quam, sit amet pulvinar velit malesuada eu. Aliquam erat volutpat. Sed vulputate quam id diam venenatis rutrum.Maecenas dapibus dolor et lacus auctor, id vestibulum felis imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus pretium condimentum cursus. Nullam porttitor nisi at orci hendrerit, vel rutrum turpis blandit. Suspendisse dictum augue risus, at accumsan justo varius sit amet. Vivamus eros urna, posuere id ornare nec, tincidunt eu nibh. Morbi molestie ipsum nec elit egestas iaculis. In viverra orci ac porta euismod. Vestibulum sed ultrices velit, quis fringilla nibh. Proin suscipit tincidunt mauris, nec venenatis dolor. Sed ultrices rhoncus velit, in molestie risus consectetur nec. In hac habitasse platea dictumst. Proin nec mattis est. Pellentesque tempor felis nec tempor convallis.Curabitur et fermentum neque. Praesent hendrerit aliquam nunc sed aliquet. Phasellus a erat accumsan purus pretium dapibus. Duis gravida gravida dapibus. Phasellus sodales nisl sed sapien congue tempor. Vestibulum consectetur sagittis cursus. Nunc congue rhoncus tempor. Donec vestibulum nibh ut gravida placerat. Fusce sodales molestie orci non malesuada. Duis quam augue, scelerisque et justo quis, posuere rutrum nibh. Pellentesque ut sapien mattis, scelerisque neque et, ultricies leo. Suspendisse molestie est mauris, sed pharetra erat luctus vel. Vivamus faucibus placerat augue sed dictum. Nam erat ante, gravida ut purus vel, ornare pellentesque risus.
  </p>
</div>

/*
 * CSS shape-outside and shape-margin example
 *
 * This example uses an image floated to the left to illustrate 
 * how shape-outside and shape-margin work in newer browssers.
 *
 * This code is based on an example from Rebecca Hauk posted on the 
 * Web Platform Documentation Project
 *
 * @author carlos araya carlos
 * @see http://docs.webplatform.org/wiki/css/properties/shape-margin
 * @spec http://www.w3.org/TR/css-shapes/#shape-margin-property
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
  
body {
font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}

.shape {
  width: 400px;
  height: 400px; 
}

.shape-left {
  float: left;
  shape-outside: url('https://assets.codepen.io/32795/bees.png');
  shape-margin : 1.5rem;
}

.shape-right {
  float: right;
  shape-outside: url('https://assets.codepen.io/32795/bees.png');
  shape-margin : .5rem;
}