How do I crop an image I rotated as a background with CSS so that it again has clean vertical edges and clean horizontal edges?

Great question. Let's start off with this:

<div style="width:540px; height: 400px; background-image:
      url('https://68.media.tumblr.com/84f731e1b7c9ce8a81786f29b36762fc/
      tumblr_os45hx7DZw1vk5zz2o5_540.jpg');">
</div>

 
 

It's going to give us this tumblr image of Eiza González Reyna. I'll use her as my muse. She is on my mind because I just saw her in the film "Baby Driver" last night.

 
 

Now let's rotate the image like so:

<div style="width:540px; height: 400px; background-image:
      url('https://68.media.tumblr.com/84f731e1b7c9ce8a81786f29b36762fc/
      tumblr_os45hx7DZw1vk5zz2o5_540.jpg'); -ms-transform: rotate(320deg);
      -webkit-transform: rotate(320deg); transform: rotate(320deg);">
</div>

 
 

The spun stuff looks like this now:

 
 

Now comes the magic! We wrap our div in another div with the overflow: hidden; style to do the cropping. We must adjust the margins at our original div however to make the subset of what might be shown make sense. If we do not we are making a crop of the upper left corner of the turned image and we will catch the edge of where the image stops and dead space starts in our cropping. It's bad. Trust me.

<div style="width:81px; height: 195px; overflow:hidden;">
   <div style="width:540px; height: 400px; background-image:
         url('https://68.media.tumblr.com/84f731e1b7c9ce8a81786f29b36762fc/
         tumblr_os45hx7DZw1vk5zz2o5_540.jpg'); -ms-transform: rotate(320deg);
         -webkit-transform: rotate(320deg); transform: rotate(320deg); margin-left: -113px;
         margin-top: -138px;">
   </div>
</div>

 
 

This makes for:

 
 

If you want to get even more crazy and rotate the outer div, be my guest.

<div style="width:81px; height: 195px; overflow:hidden; -ms-transform: rotate(225deg);
      -webkit-transform: rotate(225deg); transform: rotate(225deg);">
   <div style="width:540px; height: 400px; background-image:
         url('https://68.media.tumblr.com/84f731e1b7c9ce8a81786f29b36762fc/
         tumblr_os45hx7DZw1vk5zz2o5_540.jpg'); -ms-transform: rotate(320deg);
         -webkit-transform: rotate(320deg); transform: rotate(320deg); margin-left: -113px;
         margin-top: -138px;">
   </div>
</div>

 
 

We get: