I’m experimenting with CSS Shapes. I can’t seem to get the image shape to work. As far as I can tell, my image has an alpha channel, it’s just that the browser is not reading it.
HTML:
<div class="container">
<img src="http://www.kfcartography.com/wp-content/uploads/2015/05/weirdshape2.png">
<p>Text that should be flowing around the weird shape.</p>
</div>
CSS:
.container{
max-width: 300px;
color: black;
}
img{
width: 100%;
height: auto;
float: left;
shape-outside: url("http://www.kfcartography.com/wp-content/uploads/2015/05/weirdshape2.png");
shape-image-threshold: 0.1;
shape-margin: 10px;
}
The original shape was created in Illustrator and saved as a PNG-24 with transparency (which should add an Alpha channel). I’ve also opened it in GIMP and played around there with masks and adding an alpha channel (though it already had one from the Illustrator file).
What am I missing?
If you encode you image to base64 you don’t get the CROS issue.
The issue you get thou is that it clog’s up your CSS file a lot…